英文:
Where do you put _app.js in the app directory
问题
Documentation for next-auth (version 4) indicates that we need to put the service provider in:
pages/_app.js
I am following the example:
<https://next-auth.js.org/getting-started/example>
If I'm using the experimental app directory instead of the pages directory in nextjs 13, where do we put that _app.js file?
英文:
Documentation for next-auth (version 4) indicates that we need to put the service provider in:
pages/_app.js
I am following the example:
<https://next-auth.js.org/getting-started/example>
If I'm using the experimental app directory instead of the pages directory in nextjs 13, where do we put that _app.js file?
答案1
得分: 4
以下是代码部分的翻译：
不幸的是，你必须有两个实现。
在实验性应用程序目录中，你需要包装根布局。
// app/provider.js
"use client";
import { SessionProvider } from "next-auth/react";
export default function Providers({ children }) {
return <SessionProvider>{children}</SessionProvider>;
}
然后在根布局中：
import Provider from "./provider";
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<Provider>{children}</Provider>
</body>
</html>
);
}
类似地，你需要包装 _app.js：
import { SessionProvider } from "next-auth/react";
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
API 文件位于相同目录中：pages/api/auth/[...nextauth].js
英文:
Unfortunately, you have to have two implementations.
In experimental app directory you have to wrap root layout.
// app/provider.js
"use client";
import { SessionProvider } from "next-auth/react";
export default function Proiders({ children }) {
return <SessionProvider>{children}</SessionProvider>;
}
then in root layout
import Provider from "./provider";
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>
<Provider>{children}</Provider>
</body>
</html>
);
}
similarly you have to wrap _app.js too
import { SessionProvider } from "next-auth/react"
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
api file is the same directory. pages/api/auth/[...nextauth].js
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论