Intercepting Routes

TL;DR

Next.js の App Router で、同じ階層または別の階層の Route Segment を横取り（インターセプト）するための Route の定義。現在のページの文脈を保ったまま、別の Segment の内容を現在のレイアウトの中に表示できる。

仕組み

インターセプトは Soft navigation のときだけ起きる。リロードは Hard navigation なので、インターセプトは起きない。

どの Route Segment に一致させるかは、ディレクトリ名の先頭に付ける記号で決める。

規則	インターセプトする Segment
(.)	同じ階層
(..)	1 つ上の階層
(..)(..)	2 つ上の階層
(...)	app ディレクトリ直下

例

Parallel Routes と組み合わせると、「Soft navigation のときはモーダルで写真を表示する」といった機能を作れる。@modal は Parallel Routes の Slot で、Route Segment ではない。このため、@modal の中から (..) で 1 つ上の階層に一致させられる。

インターセプトしたときに表示するコンポーネントは、写真をモーダルで包む。

// Intercepting Route
export default function PhotoModal({ params }) {
  const photo = photo.find((p) => p.id === params.id)
 
  return (
    <Modal>
      <Photo photo={photo} />
    </Modal>
  )
}

直接アクセスしたときに表示する、元の Route Segment のコンポーネントは、写真だけを表示する。

// current Route Segment
export default function PhotoModal({ params }) {
  const photo = photo.find((p) => p.id === params.id)
 
  return <Photo photo={photo} />
}

自分の理解

文章で理解するより、実際のディレクトリ構成を見たほうが理解しやすい。

関連

• Parallel Routes
• Soft navigation
• Hard navigation
• 実践Next.js ——App Routerで進化するWebアプリ開発 第8章 Parallel RoutesとIntercepting Routesを用いたモーダル

出典

• Intercepting Routes - Next.js
• Intercepting Routes - Next.js（Modals）