並列ルートとインターセプトルートとは何ですか?

Question

Accepted Answer

これらは高度なApp Routerの2つの機能で、洗練されたUIレイアウト用です。フォルダ規約の構文を共有しています。

並列ルート(@folder) — 1つのレイアウトで複数のページをレンダリング

並列ルートを使用すると、単一のレイアウトが複数の独立したルート「スロット」を同時にレンダリングでき、各スロットが独自のローディング/エラー状態を持ちます。スロットは@nameフォルダで定義します:

text

app/
  layout.tsx
  @team/page.tsx      → a slot
  @analytics/page.tsx → another slot

tsx


   () {
   ;
}

{children} ; } ``` 各スロットは**独立して**ナビゲートしロードされます — **ダッシュボード**でパネルが個別に更新される場合、または2つのセクションを同時に表示する場合に最適です。 ## インターセプトルート((.)folder) — 現在のページを離れずにルートをオーバーレイインターセプトルートを使用すると、ナビゲーションを「キャッチ」して、フルページの代わりに**現在のコンテキスト**(例:モーダル)でレンダリングすることができます — ただし、実在する共有可能なURLは保持されます。 ```text app/feed/page.tsx app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed app/photo/[id]/page.tsx → the full page (on direct visit / refresh) ``` ```text Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123 Refresh or share that URL → renders the FULL photo page (no interception) ``` インターセプションマーカー(`(.)` 同じレベル、`(..)` 1つ上、`(...)` ルート)は、どのセグメントをインターセプトするかを制御します。これはInstagramスタイルの「写真がモーダルで開くが独自のURLを持つ」パターンがまさにどのように機能するかです。 ## なぜ重要なのか並列ルートは複雑で独立してロードされるマルチペインレイアウト(ダッシュボード)をクリーンに実現します。インターセプトルートは「実在するURLを持つモーダル」パターン(共有可能で、リフレッシュ時も安全で、戻るボタンに対応)を提供しており、これは構築が難しいものです。高度な機能ですが、実際のUX問題 — 独立したパネルとコンテキストオーバーレイ — を解決します。これまではルーティング/状態管理に大量の手動作業が必要でした。