一画面で完結！Next.js 15 パラレルルート分割術

Next.js 15 の パラレルルート を使うと、同一レイアウト内で複数のページを同時にレンダリングできます。このガイドでは、メインコンテンツ・サイドバー・モーダルがそれぞれ独立したパラレルルートとして動作する最小のダッシュボード例を示します。それぞれがブロックされることなく、独立に読み込み・更新が行えます。

主なポイント：

• パラレルルートスロット は @ プレフィックス付きのフォルダで定義します（例：@modal, @sidebar）。
• 各スロットは自身の page.tsx（および必要に応じて loading/error 状態）を持ちます。
• レイアウトでは、対応する props（children, modal, sidebar）を使ってすべてのスロットを描画します。
• ルートインターセプト（例：(.)settings）をスロット内で使うと、フルナビゲーションなしで URL 状態を共有するモーダルをレンダリングできます。

このパターンは、ダッシュボードや設定パネルなど、独立したセクションをレスポンシブに保ちたいインターフェースに最適です。