Intercepting Routes

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

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

しかし、共有可能なURLをクリックしたり、ページを更新したりして写真に移動する場合、モーダルの代わりに写真ページ全体をレンダリングする必要があります。この際はルートのインターセプトが発生しないようにします。

規約

Intercepting routesはセグメントに対する(..)規約を用いて定義できます。これは、../の相対パス規約に似ています。

使用可能なもの：

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

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

Intercepting RoutesはParallel Routesと組み合わせてモーダルを作成するために使用できます。これにより、モーダルを構築する際の一般的な課題を次のように解決できます：

次のようなUIパターンを考えてみてください。ユーザーはクライアントサイドナビゲーションを使用してギャラリーから写真モーダルを開くことができ、または共有可能なURLから直接写真ページにナビゲートできます。

上記の例では、@modalはスロットであり、セグメントではないため、photoセグメントへのパスは(..)マッチャーを使用できます。これは、ファイルシステムレベルが二つ上であるにもかかわらず、photoルートはセグメントレベルでは一つ上に過ぎないことを意味します。

詳細な手順はParallel Routesのドキュメントで、または画像ギャラリーの例をご覧ください。

Good to know:

他の例としては、トップナビバーでログインモーダルを開くと同時に専用の/loginページを持ったり、サイドモーダルでショッピングカートを開くことが含まれる可能性があります。