Intercepting Routes

Same URL, Different Presentation

Intercepting routes match another route's path but render it in the current layout tree instead of navigating away. Soft client navigations are intercepted; hard loads and refreshes typically render the target route as a full page. That combination gives modal UX without sacrificing shareable URLs.

The convention uses parentheses with dots relative to the intercepting folder: (.) same level, (..) one level up, (..)(..) two levels up, and (...) from the root app/ directory.

// Soft navigation from /feed → photo modal
// Hard load / refresh of /photo/123 → full photo page

app/
  feed/
    page.tsx
    @modal/
      (.)photo/[id]/
        page.tsx      // intercepted modal when coming from /feed
    layout.tsx
  photo/
    [id]/
      page.tsx          // full page when opened directly

(.)photo means "intercept the photo segment at the same level as this slot," often rendered as a modal through a parallel @modal slot.

Interception Convention Map

(.)folder     // intercept same-level segment
(..)folder    // intercept one level above
(..)(..)folder // intercept two levels above
(...)folder   // intercept from app root

• The number of dots describes how far relative to the intercepting file to look for the matched segment.
• Interception mainly applies to client-side soft navigations.
• Pair with a parallel @modal slot so the underlying page stays mounted.
• Provide a default.tsx in the modal slot that returns null when no modal is active.

Intercepting Routes Cheat Sheet

Common modal routing patterns.

Building the Modal UX

The intercepted page component usually renders modal chrome (overlay, close button). Closing navigates back so the feed is still visible and its scroll/state can remain intact because the feed route never fully unmounted.

// app/feed/@modal/(.)photo/[id]/page.tsx
import Link from "next/link";

export default function PhotoModal({ params }: { params: { id: string } }) {
  return (
    <div role="dialog" aria-modal="true">
      <Link href="/feed">Close</Link>
      <img src={`/photos/${params.id}.jpg`} alt={`Photo ${params.id}`} />
    </div>
  );
}

Hard vs Soft Navigation Behavior

Opening /photo/123 in a new tab loads the full photo page, which is what you want for SEO and sharing. Clicking a photo link inside /feed soft-navigates and shows the intercepted modal. Matching this mental model is the key to debugging "why is my modal not showing?" issues.

Common Mistakes

• Building only an intercepted modal route and forgetting the real full page for hard navigations.
• Using the wrong number of dots in (.) / (..) and wondering why interception never fires.
• Omitting @modal/default.tsx, leaving a stale modal visible after closing.
• Expecting a full browser refresh to keep showing the intercepted modal variant.

Key Takeaways

• Intercepting routes render another route inside the current layout on soft navigations.
• Conventions like (.) and (..) define how far relative to climb for the matched segment.
• They commonly power shareable modal UIs when paired with parallel @modal slots.
• Hard loads and refreshes use the real target route as a full page.
• default.tsx in the modal slot cleans up when no modal should show.