标题重写为:Unsicher, ob Nextjs _app.js erkennt; Fehler: useSession muss in einen <SessionProvider /> eingeschlossen werden
P粉771233336
2023-09-04 00:10:21
<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>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我想我已经解决了这个问题，我决定忘记 _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将不允许您导出元数据，因此您需要删除从代码中导出 const 元数据 = {...。更新：由于某种原因，它无法在 Vercel 上运行（即使它在本地运行）。我会尝试修复它，然后更新我的答案。 TL;DR：此解决方案在本地运行，但在部署到 Vercel 时不起作用。