我一直在学习一些关于Nextjs、Prisma和Auth 0的教程。我的问题是,在尝试在我的头文件上创建登录/注销按钮(通过将import { useSession, signIn, signOut } from "next-auth/react"
添加到header.js
文件)后,Next.js显示以下错误Error: [next-auth]: \
useSession` must be wrapped in a <SessionProvider />。我尝试在根文件夹中创建
_app.js文件,然后在
/pages/_app.js,最后在
/app/_app.js。这些都不管用。 这是我
_app.js file:`的内容
import { SessionProvider } from "next-auth/react"
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
如何确保Next正在检测并使用它?我觉得文件被忽略了。
我尝试将_app.js
文件的位置从项目的根文件夹更改为/pages/_app.js
,最后更改为app/_app.js
。我还尝试删除.next
文件夹并重新运行服务器,但它不起作用。
**更新1:**正在使用的Next.js版本:v13.4.4
**更新2:**我已经在_app.js
文件中添加了一个console.log()
函数,它正在打印到终端,但不在Firefox上。这是否意味着_app.js
检测正常或有问题?
我修好了!请在下面查看我的答案**
1条答案
按热度按时间gdx19jrr1#
我想我已经解决了这个问题,我决定忘记_app.js,把所有东西都放在我的自定义layout.js文件中。我仍然需要测试用户是否会保持登录,因为header.js在layout.js之外。
如何解决:我补充道
layout.js
(Next.js默认附带的文件),并将会话传递到“导出”函数的参数中(导出默认函数RootLayout)。然后,我将所有的return()参数都封装起来。下面是部分代码:
**重要提示:**如果您使用
'use client'
选项,则Next不允许导出元数据,因此您需要从代码中删除export const metadata = {...
。更新:由于某些原因,它在Vercel上不起作用(即使它在本地运行)。我会尝试修复它,然后我会更新我的答案。**TL;DR:**此解决方案在本地工作,但部署到Vercel时无法工作。