標題重寫為：Uncertain if Nextjs is detecting _app.js; Error: useSession must be wrapped in a <SessionProvider />
P粉771233336
2023-09-04 00:10:21
<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</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>
我想我已經解決了這個問題，我決定忘記 _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 時不起作用。