タイトルは次のように書き換えられます: Nextjs が _app.js を検出しているかどうかは不明; エラー: useSession は <SessionProvider /> でラップする必要があります

Question

私は Nextjs、Prisma、Auth0 に関するいくつかのチュートリアルに従ってきました。私の問題は、ヘッダーにログイン/ログアウトボタンを作成しようとした後です（「next-auth/react」からヘッダーにimport { useSession,signIn,signOut} を追加することによって） .js ファイル) を使用すると、 next.jsError: [next-auth]: \`useSession\` を \ でラップする必要があります。 _app.js ファイルをルート フォルダーに作成し、次に /pages/_app.js、最後に /app/_app に作成してみました。 .js。これらはどれも機能しません。

これは私の_app.jsファイルの内容です:

import { SessionProvider } from "next-auth/react"

デフォルト関数をエクスポート App({
  成分、
  pageProps: { セッション, ...pageProps },
}) {
  戻る （
    <セッションプロバイダー session={session}>
      <コンポーネント {...pageProps} />
    </セッションプロバイダー>
  ）
}

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 にデプロイすると機能しません。

Answer 1

この問題は解決したと思います。_app.js のことは忘れて、すべてをカスタムのlayout.js ファイルに入れることにしました。 header.js はlayout.js の外部にあるため、ユーザーがログインしたままになるかどうかをテストする必要があります。

私がそれを解決した方法:

を追加しました リーリー

layout.js (デフォルトで Next.js に付属するファイル) に移動し、「エクスポート」される関数のパラメーターにセッションを渡します (デフォルト関数 RootLayout がエクスポートされます)。次に、すべての return() パラメータを でラップしました。

これはコードの一部です:

リーリー

重要な部分: 'use client' オプションを使用すると、Next ではメタデータをエクスポートできなくなるため、export const メタデータをコード = {...。

UPDATE: 何らかの理由で、Vercel では動作しません (ローカルでは動作しますが)。それを修正して回答を更新してみます。 TL;DR: このソリューションはローカルでは機能しますが、Vercel にデプロイすると機能しません。