Next.js の Interception Routes について

Next.js 13/14で導入されたApp RouterのInterception Routesは、ユーザーが別のページへ遷移する際、そのコンテンツを現在のページのレイアウト内にオーバーレイ表示させる機能です。例えば、画像ギャラリーで特定の画像をクリックした際に、URLは画像の詳細を示すものの、見た目上は元のギャラリーページの上にモーダルとして画像が表示されます。これにより、ページ全体の再ロードなしにコンテンツを表示し、ユーザー体験を向上させます。ファイルシステムベースのルーティング規約として(.)や(..)、(...)を用いて、インターセプトするルートの階層を柔軟に指定できる点が特徴です。

• •Next.js App Routerの機能で、現在のレイアウトを保持しつつ、別のルートのコンテンツをオーバーレイとして表示する。
• •写真ギャラリーの画像詳細をモーダルで表示する際など、既存ページのURLコンテキストを維持したままコンテンツを見せるユースケースに適している。
• •ファイルシステムルーティングに(.) (同じ階層) や(..) (一つ上の階層) といった特定の規約を用いて、インターセプトするルートを指定する。