︙

Intercepting Routes

routes をインターセプトすることで、現在の layout 内でアプリケーションの別の部分から route を読み込むことができます。このルーティングパラダイムは、ユーザーが異なる context に切り替えることなく route の内容を display したい場合に役立ちます。

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

しかし、共有可能な URL をクリックして写真へ移動したり、ページを更新したりすると、モーダルの代わりに写真全体のページが render されるべきです。 route の妨害は発生しないはずです。

Convention

(..)規則を用いて、 routes を傍受することが定義できます。これは相対的な path 規則である../と似ていますが、これはセグメント用です。

あなたは次を使用できます：

(.)は同じレベルのセグメントにマッチします。
(..)は 一つ上のレベル のセグメントにマッチする
(..)(..)は、二つ上のレベルのセグメントに一致します
(...)は、root app ディレクトリからのセグメントに一致します

例えば、(..)photoディレクトリを作成することにより、feedセグメント内からphotoセグメントを傍受することができます。

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

Examples

Modals

Routes をインターセプトすることは、モーダルを作成するために Parallel Routes と一緒に使用することができます。これにより、モーダルを作成する際によく遭遇する問題を解決できます。例えば：

モーダルの内容をURL を通じて共有可能にする。
ページをリフレッシュしたときにモーダルを閉じるのではなく、コンテキストを保持する。
前のルートに戻るのではなく、後方ナビゲーションでモーダルを閉じる。
前方ナビゲーションでモーダルを再開する。

次の UI パターンを考えてみてください。ユーザーは、Client 側のナビゲーションを使用してギャラリーからフォトモーダルを開くことができます。または、共有可能な URL から直接フォトページに移動することもできます。

上記の例では、photoセグメントへの path は、@modalがスロットであり、セグメントではないため、(..)の matcher を使用できます。これは、photoの route が 2 つのファイルシステムレベルよりも高いにもかかわらず、1 つのセグメントレベルだけ高いことを意味します。

Parallel Routes のドキュメンテーションを参照して、ステップバイステップの例をご覧いただくか、または image ギャラリーの例をご覧ください。

Good to know:

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