你好,我正在学习下一个js 13,而不知道下一个js 12。我想用下一个js auth 4做点什么。
file structure
你可以看到这里是我的文件结构。我正在使用next js的实验性app folder组件。我被告知不要为此使用页面,但我遇到了一个问题。这段代码直接来自下一个js框,但在下一个auth中,它说我需要将整个应用程序 Package 在会话提供程序中。我在这里对堆栈使用的布局文件。但是在这个建议中,我没有一个会话给予我的会话提供者!
请参阅:rootlayout.jsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing code</title>
</head>
<body className={inter.className}>
<Providers>
{children}
</Providers>
</body>
</html>
)
}
provider.jsx
'use client'
import { SessionProvider } from "next-auth/react"
const Providers = ({children}) => {
return (
<>
<SessionProvider>
{children}
</SessionProvider>
</>
);
}
export default Providers;
会话提供者由于根布局而没有获得会话。
jsx会给予它一个会话。
如果我添加了一个pages文件夹,它可能会干扰项目,但我如何做/修复这个?
1条答案
按热度按时间pdtvr36n1#
我在上面的代码中看到了一些问题。
1.文件夹结构问题它应该是这样的
[... nextauth]-是nextjs用于动态路由的文件夹
example- localhost:3000/API/auth/callback
供参考-https://next-auth.js.org/getting-started/example
2.provider.jsx
1.在上面共享的文件夹结构中,它提到了layout.jsx和page.jsx,这是正确的,但在问题中,你提到了rootLayout.jsx,这是不正确的。我不知道你用的是哪一个,但正确的方法是使用
layout.jsx
注意:请导入layout.jsx中使用的提供程序
您不必从rootLayout手动发送会话,Nextjs会自动处理