NextAuth 提供者组件

Question

在NextAuth的官方文档中，他们是这样用Provider包装组件的：

`
 import { Provider } from "next-auth/client"

 export default function App({ Component, pageProps }) {
 return (
    <Provider session={pageProps.session}>
       < Component {...pageProps} />
    </Provider>
   )
 }`

这样把Layout和Head也包起来有什么问题吗？

function MyApp({ Component, pageProps }) {
 // Use the layout defined at the page level, if avaiable (in my case for the QeAs)
 const getQeAsLayout = Component.getQeAsLayout || ((page) => page);
 return (
    <Provider session={pageProps.session}>
     <Head>
       <meta name="viewport" content="initial-scale=1.0, width=device-width" />
     </Head>

     <ThemeProvider theme={brandTheme}>
       <Layout>{getQeAsLayout(<Component {...pageProps} />)}</Layout>
     </ThemeProvider>
    </Provider>
  );
}

请不要考虑有关 getQeAsLayout 的行

Answer 1

不，这没有任何问题。会话提供程序应该可以正常工作。

Provider 组件中的每个 child 都应该有权访问 session。如 docs 中所述，提供者在幕后使用 React Context。查看 React Context Provider 了解更多信息。

NextAuth 提供者组件

NextAuth Provider component

reactjs

next.js

next-auth