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

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

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

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

規約

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

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

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

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

インターセプティングルートは並列ルートと組み合わせてモーダルを作成する際に使用できます。

このパターンを使用することで、モーダル実装時の一般的な課題を解決できます:

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

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

インターセプティングルートと並列ルートを使用したモーダルの実装例をご覧ください。