suchen

Heim  >  Fragen und Antworten  >  Hauptteil

标题重写为:Unsicher, ob Nextjs _app.js erkennt; Fehler: useSession muss in einen <SessionProvider /> eingeschlossen werden

<p>Ich habe einige Tutorials zu Nextjs, Prisma und Auth0 verfolgt. Mein Problem besteht darin, dass ich versucht habe, eine Anmelde-/Abmeldeschaltfläche im Header zu erstellen (durch Hinzufügen von <code>import { useSession,signIn,signOut } von „next-auth/react“ </code> zum <code>-Header). .js</code>-Datei), tritt in next.js<code> der folgende Fehler auf: [next-auth]: „useSession“ muss in <SessionProvider /></code> eingeschlossen werden. Ich habe versucht, die Datei <code>_app.js</code> im Stammordner zu erstellen, dann unter <code>/pages/_app.js</code> und schließlich unter <code>/app/_app .js</code>. Nichts davon funktioniert. </p> <p>Dies ist der Inhalt meiner<code>_app.js-Datei: </code></p> <pre class="brush:php;toolbar:false;">import { SessionProvider } from "next-auth/react" Exportieren Sie die Standardfunktion App({ Komponente, pageProps: { session, ...pageProps }, }) { zurückkehren ( <SessionProvider session={session}> <Component {...pageProps} /> </SessionProvider> ) }</pre> <p>Wie stelle ich sicher, dass Next es erkennt und verwendet? Ich denke, die Datei wird bis zu einem gewissen Grad ignoriert. </p> <p>Ich habe versucht, den Speicherort der Datei <code>_app.js</code> vom Stammordner des Projekts in <code>/pages/_app.js</code> zu ändern. app/_app.js</code> Ich habe auch versucht, den Ordner <code>.next</code> zu löschen und den Server erneut auszuführen, aber es hat nicht funktioniert. </p> <p><strong>Update 1: </strong> Von mir verwendete Next.js-Version: v13.4.4</p> <p><strong>Update 2: </strong> Ich habe die Funktion <code>console.log()</code> zur Datei <code>_app.js</code> hinzugefügt und sie wird auf dem Terminal gedruckt, aber nicht auf Firefox. <code>_app.js</code> Ist die Erkennung normal oder liegt ein Problem vor? </p> <p><strong>Ich habe es (irgendwie) behoben! Überprüfen Sie meine Antwort unten. Bei der Bereitstellung in Vercel funktioniert es jedoch nicht. </strong></p>
P粉771233336P粉771233336449 Tage vor619

Antworte allen(1)Ich werde antworten

  • 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 时不起作用。

    Antwort
    0
  • StornierenAntwort