Intercepting Routes

An intercepting route lets you load a different route within the current layout context when the user navigates to it client-side, while still showing the actual destination route's full page if it's loaded directly (a hard refresh, or a shared link). This is one of the more advanced App Router features, and it genuinely takes some practice to internalize — so don't worry if it doesn't click on the first read.

The convention

You mark the intercepting folder with a special dot-prefixed convention, relative to the segment doing the intercepting:

Convention	Meaning
`(.)`	Match segments on the same level as the intercepting folder
`(..)`	Match segments one level above
`(..)(..)`	Match segments two levels above (chain `(..)` further as needed)
`(...)`	Match segments starting from the root `app` directory

Classic use case: a photo modal

Picture a photo feed at /feed, where each photo also has its own full page at /photo/[id]. The desired behavior is:

Clicking a photo from /feed opens it in a modal, layered over the still-visible feed — the URL updates to /photo/123, but the feed underneath stays mounted.
Navigating to /photo/123 directly — a fresh page load, a shared link, or a browser refresh — renders the photo as a full standalone page, with no feed behind it.

Both behaviors point at the exact same URL; what differs is how the user arrived there. This is exactly what intercepting routes are built for, and it's usually combined with a parallel route slot that holds the modal.

Folder structure

Text

app/
  feed/
    page.tsx              // /feed
    @modal/
      (.)photo/
        [id]/
          page.tsx         // intercepted modal version
      default.tsx          // renders null when no modal is active
    layout.tsx             // renders {children} and {modal}
  photo/
    [id]/
      page.tsx              // full standalone page

The (.)photo folder intercepts navigations to /photo/[id] that originate from within /feed (same level as the intercepting segment), and renders that intercepted version inside the @modal parallel slot — layered over the feed via the layout. A direct navigation to /photo/123, with no active client-side transition from /feed, bypasses the interception entirely and renders app/photo/[id]/page.tsx as a normal full page.

Note

Interception only happens on client-side navigation — clicking a <Link> or calling router.push() from within the matching layout context. A hard navigation (typed URL, refresh, external link) always renders the real destination route as-is.

(.), (..), (..)(..), and (...) intercept a route relative to the intercepting segment's position in the folder tree.
Interception only applies to client-side navigation — direct loads always render the real route.
The classic pattern pairs an intercepting route with a parallel route slot, so the intercepted content can render as a modal layered over the current page.
This is an advanced pattern — expect to revisit the folder conventions a few times before they feel natural.