ルートのインターセプト

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

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

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

規約

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

次を使用できます。

• (.)は**同じレベル**のセグメントに一致します。
• (..)は**一つ上のレベル**のセグメントに一致します。
• (..)(..)は**二つのレベル上**のセグメントに一致します。
• (...)はルートappディレクトリからのセグメントに一致します。

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

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

例

モーダル

ルートのインターセプトは、並列ルートと組み合わせてモーダルを作成するために使用できます。これにより、モーダルの構築における一般的な課題、たとえば、

• モーダルのコンテンツを**URLを介して共有可能**にする。
• ページが更新されたときに**コンテキストを維持**し、モーダルを閉じないようにする。
• 戻るナビゲーションでモーダルを閉じ、前のルートに移動しないようにする。
• 進むナビゲーションでモーダルを再び開く。.

ユーザーがクライアント側のナビゲーションを使用してギャラリーから写真モーダルを開いたり、共有可能なURLから直接写真ページに移動したりできるUIパターンを考えてみましょう。

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

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

知っておくと良いこと

• その他の例としては、専用の/loginページを持ちながら、トップナビゲーションバーでログインモーダルを開いたり、サイドモーダルでショッピングカートを開いたりすることが考えられます。