Next.jsでuseStateで管理したログイン情報を別ページでも使いたい

実現したいこと

Next.jsでユーザーのログイン情報を別のページでも使いたい。

例
src/App.jsx
ログインユーザーの情報をuseStateを使って、管理。

src/app/user/page.jsx
こちらでも　src/App.jsx　で使用したstateを使いたい。

前提

作成中のアプリケーションの構成は、ヘッダーの中に「新規登録」、「ログイン」のナビゲーションがあり、
そこから、それぞれのページへ遷移し、そこでログインに必要な情報をフォームに入力する。

試したこと

useContextを使いstateの共有を試したのですが、うまくいきません。

src/App.jsx ------------------------------ export const AuthContext = createContext({}); . .中略 . const [isSignedIn, setIsSignedIn] = useState(false); const [currentUser, setCurrentUser] = useState(); . .中略 . <AuthContext.Provider value={{isSignedIn, setIsSignedIn, currentUser, setCurrentUser}}> <SignIn /> <User /> </AuthContext.Provider>

src/app/user/page.jsx ------------------------------------------ 'use client' import React, { useContext } from 'react' import { AuthContext } from 'src/App' import Header from 'src/components/Header'; const User = () => { const {isSignedIn, currentUser} = useContext(AuthContext); return ( <div> <Header /> { isSignedIn && currentUser ? ( <div> <h2>{currentUser?.name}</h2> <h3>{currentUser?.email}</h3> </div> ) : ( <h2>Not Signed In</h2> ) } </div> ) } export default User

src/app/page.jsx ------------------------------- export default function Home() { return ( <main> <Header /> <App /> </main> ) }

上記のコードで動作的には問題なく動くのですが、'localhost:3000'にアクセスすると、当然ながらこちらのページにログインフォームやユーザーの名前などが全て表示されてしまう。

useContextはコンポーネント間だけでなくページ間でもstateの共有はできるのでしょうか。

補足情報（FW/ツールのバージョンなど）

環境

react ・・・v18
Next.js ・・・v14(App Router)

分かりづらい説明ではありましたが、回答よろしくお願いします。