ログイン/ログアウトの切替をNext.js 13で実施する方法について

実現したいこと

Next.js 13でログイン/ログアウトの切替を以下の手順で行いたい。

➀ App/page.tsxで状態変数をbooleanで定義
➁ ➀をpropsとしてNavBar.tsx → login/page.tsx, logout/page.tsxの順に渡す
➂ login/page.tsx, logout/page.tsxにて、更新関数で真偽値を反転
➃ NavBar.tsxにて、ログイン時はLOGOUTを、ログアウト時はLOGINを表示させる

前提

■ 現在のディレクトリ構成(App Routerを使用)

// 構成図 App/ ├─ components/ │ └─ NavBar.tsx ├─ data │ └─ FireBase.ts ├─ pages │ ├─ createpost │ │ └─ page.tsx │ ├─ login │ │ └─ page.tsx │ └─ logout │ └─ page.tsx ├─ styles ├─ layout.tsx └─ page.tsx

質問

ナビゲーションバーにおいて、ログイン時はLOGOUTが、
ログアウト時はLOGINが表示される状態を作りたい。

発生している問題・エラーメッセージ

Next.jsのLinkを使用する場合、NavBar.tsxからlogin/page.tsxに変数をpropsとして渡すことができず、どのように変数を更新すれば良いかが分からずにいます。

該当のソースコード

typescript

1// App/page.tsx2const App = () => {3// isAuthで状態変数としてログイン情報を保持し、propsで渡したい4// const [isAuth, setIsAuth] = useState(false);5 return (6 <div className="app">7 <style jsx>{styles}</style>8 <NavBar />9 </div>10 );11};12 13export default App;

typescript

1// NavBar.tsx2interface isAuthProps {3 isAuth: boolean;4}5 6const NavBar = () => {7 const [isAuth, setIsAuth] = useState(false);8 9　// だが、受け取ったpropsをloginとlogoutに受け流すことができない10　// コンポーネントを記載できないため11 return (12 <>13 <style jsx>{styles}</style>14 <nav className='app-nav'>15 <Link href='/pages/home ' className='app-nav-item'>16 <FontAwesomeIcon color='#fff' icon={faHouse} />17 <p className='app-nav-item-text'>HOME</p>18 </Link>19 <Link href='/pages/createpost' className='app-nav-item'>20 <FontAwesomeIcon color='#fff' icon={faFilePen} />21 <p className='app-nav-item-text'>POST</p>22 </Link>23 {!isAuth ? (24 <Link href='/pages/login' className='app-nav-item'>25 <FontAwesomeIcon color='#fff' icon={faArrowRightToBracket} />26 <p className='app-nav-item-text'>LOGIN</p>27 </Link>28 ) : (29 <Link href='/pages/logout' className='app-nav-item'>30 <FontAwesomeIcon color='#fff' icon={faArrowRightToBracket} />31 <p className='app-nav-item-text'>LOGOUT</p>32 </Link>33 )}34 </nav>35 </>36 );37};38 39export default NavBar;

試したこと

Next.jsのドキュメントを参照

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

Next.js 13を使用