インターセプティングルート

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

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

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

規約

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

以下のように使用できます:

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

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

インターセプティングルートは並列ルートと組み合わせてモーダルを作成するのに使用できます。これにより、モーダル構築時の一般的な課題を解決できます:

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

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

ステップバイステップの例については並列ルートのドキュメントを、実際の例については画像ギャラリーのサンプルを参照してください。

補足:

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