インターセプティングルート (Intercepting Routes)

インターセプティングルート (Intercepting Routes) を使用すると、アプリケーションの別の部分にあるルートを現在のレイアウト内で読み込むことができます。このルーティングパラダイムは、ユーザーが別のコンテキストに切り替えることなくルートのコンテンツを表示したい場合に有用です。

例えば、フィード内の写真をクリックした際に、フィードの上に重ねてモーダルで写真を表示できます。この場合、Next.jsは /photo/123 ルートをインターセプトし、URLをマスキングして /feed の上に重ねて表示します。

ただし、共有可能なURLをクリックしたりページを更新したりして写真に直接移動する場合、モーダルではなく写真ページ全体がレンダリングされるべきです。この場合、ルートのインターセプトは発生しません。

規約

インターセプティングルートは (..) 規約で定義できます。これは相対パス規約 ../ に似ていますが、セグメントに対して適用されます。

以下の記法が使用可能です:

例えば、feed セグメント内から photo セグメントをインターセプトするには、(..)photo ディレクトリを作成します。

(..) 規約はファイルシステムではなく、ルートセグメント に基づいていることに注意してください。

インターセプティングルートは並列ルート (Parallel Routes) と組み合わせてモーダルを作成できます。これにより、モーダル実装時の一般的な課題を解決可能です:

以下のUIパターンを考えてみましょう。ユーザーはクライアントサイドナビゲーションでギャラリーから写真モーダルを開くか、共有可能なURLから直接写真ページに移動できます:

上記の例では、@modal はスロットでありセグメントではないため、photo セグメントへのパスは (..) マッチャーを使用できます。つまり、ファイルシステム上では2階層上であっても、photo ルートはセグメントレベルでは1つ上の階層のみとなります。

詳細な手順については並列ルートのドキュメントを、実装例については画像ギャラリーのサンプルを参照してください。

補足:

その他の例として、トップナビゲーションバーでログインモーダルを開きつつ専用の /login ページを持つ実装や、サイドモーダルでショッピングカートを開く実装などが考えられます。