搜索

首页  >  问答  >  正文

标题重写为：Uncertain if Nextjs is detecting _app.js; Error: useSession must be wrapped in a <SessionProvider />

<p>我一直在关注一些有关 Nextjs、Prisma 和 Auth0 的教程。我的问题是，在尝试在标题上创建登录/注销按钮后（通过将 <code>import { useSession,signIn,signOut } 从“next-auth/react”</code> 添加到 <code>header.js</code> 文件），下一步.js 出现以下错误 <code>Error: [next-auth]: \`useSession\` 必须包装在 \<SessionProvider /></code> 中。我尝试在根文件夹中创建 <code>_app.js</code> 文件，然后在 <code>/pages/_app.js</code> 处创建，最后在 <code>/app/_app.js</code> 处创建。这些都不起作用。</p> <p>这是my<code>_app.js文件的内容：</code></p> <pre class="brush:php;toolbar:false;">import { SessionProvider } from "next-auth/react" export default function App({ Component, pageProps: { session, ...pageProps }, }) { return ( <SessionProvider session={session}> <Component {...pageProps} /> </SessionProvider> ) }</pre> <p>如何确保 Next 正在检测并使用它？我认为该文件在某种程度上被忽略了。</p> <p>我尝试将 <code>_app.js</code> 文件的位置从项目的根文件夹更改为 <code>/pages/_app.js</code> ，最后更改为 <code>app/_app.js</code> 。我还尝试删除 <code>.next</code> 文件夹并重新运行服务器，但它不起作用。</p> <p><strong>更新 1：</strong> 我正在使用的 Next.js 版本：v13.4.4</p> <p><strong>更新 2：</strong> 我已将 <code>console.log()</code> 函数添加到 <code>_app.js</code> 文件中，并将其打印到终端，但不在 Firefox 上。 <code>_app.js</code> 检测正常还是有问题？</p> <p><strong>我（有点）修复了它！检查下面我的答案。但部署到 Vercel 时它不起作用。</strong></p>
P粉771233336P粉771233336449 天前617

全部回复(1)我来回复

  • P粉966979765

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

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

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

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

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

    这是部分代码：

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

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

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

    回复
    0
  • 取消回复