Intercepting Routes

The plain-language idea

Intercepting routes let a route "steal" the render for another route, but only when you arrive at it via client-side navigation from a specific place in your app — a direct visit or a page refresh bypasses the interception and renders the real, full page instead. The URL bar always shows the real path either way; what changes is which component tree actually renders.

The convention borrows relative-path syntax, but for route segments, not filesystem folders:

• (.)folder — intercept a segment at the same level
• (..)folder — intercept a segment one level above
• (..)(..)folder — intercept a segment two levels above
• (...)folder — intercept a segment from the root app directory

That "levels" count is in terms of route segments, not folders on disk — a @slot folder doesn't count as a level, since slots aren't segments either.

See it in a real thing: a shareable photo-modal in a gallery

// app/feed/@modal/(..)photo/[id]/page.tsx
// Intercepts /photo/[id] — but only when reached by clicking from /feed
import { Modal } from "@/app/ui/modal";
import { PhotoView } from "@/app/ui/photo-view";

export default async function InterceptedPhotoPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  return (
    <Modal>
      <PhotoView id={id} />
    </Modal>
  );
}

// app/photo/[id]/page.tsx — the real, full page for a direct visit or refresh
export default async function PhotoPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  return <PhotoView id={id} fullPage />;
}

This is deliberately paired with a parallel route slot (@modal above) — interception alone only decides which route tree renders, it doesn't give you a place to render it alongside the page underneath. The @modal slot is what lets the intercepted photo overlay the feed instead of replacing it, and needs its own default.tsx returning null so it renders nothing when there's no active interception. Notice the convention is (..)photo, not (.)photo, even though @modal sits two folders below app/ on disk and photo sits only one: @modal isn't a route segment, so anything inside it is treated as living at its nearest real segment ancestor, feed. From feed's segment level, photo (a child of the root segment) really is one level up — that's a segment-level count, not a filesystem one, and the two disagree here on purpose. Click a thumbnail in /feed and the router intercepts /photo/42, rendering the modal version over the still-visible feed, URL bar showing /photo/42 the whole time. Paste that same /photo/42 URL into a new tab, or hit refresh while it's open, and there's no "arrived via a feed click" context to intercept from — the real app/photo/[id]/page.tsx renders as a normal full page instead.

What people usually miss

Watch out

• The (..) levels count route segments, not filesystem directory depth. A @modal slot folder doesn't count as a level even though it's a real folder on disk — app/feed/@modal/(..)photo reaches photo by going one segment up from feed, even though it's two folders up on disk.
• A direct visit or refresh never triggers interception, by design. This is what makes the URL shareable and refresh-safe: the same /photo/42 URL always has a real, full-page answer for anyone who didn't get there by clicking around your app first.
• Interception is almost always paired with parallel routes, not used alone. The (..)folder convention only decides what renders; a @slot is what gives you somewhere to render it without replacing the page underneath.
• The intercepting route and the "real" route are two separate files that both have to exist and stay reasonably in sync — app/feed/@modal/(..)photo/[id]/page.tsx and app/photo/[id]/page.tsx are independent components, so a change to one (new fields, new data needs) doesn't automatically propagate to the other.

Why this matters in interviews

"How would you build an Instagram-style photo modal where the URL is still shareable and a refresh shows the real page?" is a real, common question, and intercepting routes plus parallel routes is precisely the sanctioned App Router answer — candidates who reach for useState and a client-only modal usually haven't hit the "but it needs to be a real, refreshable URL" requirement yet.