标题重写为：Uncertain if Nextjs is detecting _app.js; Error: useSession must be wrapped in a <SessionProvider />-PHP中文网问答

我一直在关注一些有关 Nextjs、Prisma 和 Auth0 的教程。我的问题是，在尝试在标题上创建登录/注销按钮后（通过将 import { useSession,signIn,signOut } 从“next-auth/react” 添加到 header.js 文件），下一步.js 出现以下错误 Error: [next-auth]: \`useSession\` 必须包装在 \ 中。我尝试在根文件夹中创建 _app.js 文件，然后在 /pages/_app.js 处创建，最后在 /app/_app.js 处创建。这些都不起作用。

这是my_app.js文件的内容：

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： 我已将 console.log() 函数添加到 _app.js 文件中，并将其打印到终端，但不在 Firefox 上。 _app.js 检测正常还是有问题？

我（有点）修复了它！检查下面我的答案。但部署到 Vercel 时它不起作用。

export default function RootLayout({ children, session }) { return ( <html lang="en"> <SessionProvider session={session}> <body>{children}</body> </SessionProvider> </html> ) }

全部回复(1)

P粉9669797652023-09-04 23:19:18 1楼

我想我已经解决了这个问题，我决定忘记 _app.js 并将所有内容都放在我的自定义 layout.js 文件中。我仍然需要测试用户是否会保持登录状态，因为 header.js 位于 layout.js 之外。

我是如何解决的：我添加了

'use client'
import { SessionProvider } from "next-auth/react";

到layout.js（默认情况下Next.js附带的文件）并在正在“导出”的函数的参数中传递会话（导出默认函数RootLayout）。然后我用包裹了所有的 return() 参数。

这是部分代码：

重要部分：如果您使用'use client'选项，Next将不允许您导出元数据，因此您需要删除从代码中导出 const 元数据 = {...。

更新：由于某种原因，它无法在 Vercel 上运行（即使它在本地运行）。我会尝试修复它，然后更新我的答案。 TL;DR：此解决方案在本地运行，但在部署到 Vercel 时不起作用。

赞 +0

添加回复