共通レイアウトコンポーネントの構築

アプリ全体のレイアウト設計。ここでは、アプリ内ページのナビゲーションを支援し、ログアウトオプションも提供するコンポーネントの作成（認可については今後の章で解説）。

プロジェクトに戻る

次に、ダッシュボード用の layout.tsx を生成。/dashboard フォルダ内に新規ファイル layout.tsx を作成し、以下のコードを挿入。

このコードでは、いくつかの重要な処理が行われている。詳細は以下の通り：

• <SideNav /> コンポーネントをインポートし、レイアウトの一部として組み込み。ここでインポートしたコンポーネントは全体のページデザインに含まれる；
• <Layout /> コンポーネントは children プロップを持つ。この「子」はページまたは別のレイアウトとなる。特に /dashboard 内のページは自動的に <Layout /> 内に配置される。

次に、リンク http://localhost:3000/dashboard をクリックし、ダッシュボードページと請求書ページ間の移動を確認。