hardFrontend

What are intercepting routes in Next.js and what are they used for?

Q: What are intercepting routes in Next.js and what are they used for?

**TL;DR.** **Intercepting routes** (the (.) , (..) , (...) conventions) let you load a route **within the current page's context** instead of a full navigation — classically to show a photo/detail in a **modal** while keeping the URL **shareable**, falling back to the **full page** on reload. click link (soft nav) modal URL updates <path class='d-edge-

271 views

Understand the problem

Showing a route's content in the current layout (e.g. modals).

nextjsintercepting-routesmodalsrouting

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Photo modal via interception + slot

app/
  feed/page.tsx                      # list of photos
  photo/[id]/page.tsx                # full standalone page (reload/direct)
  @modal/
    (.)photo/[id]/page.tsx           # intercepts soft-nav → render as modal
    default.tsx                      # renders nothing when no modal
# Clicking a photo opens the modal (URL = /photo/123); reload shows the full page.

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is streaming SSR with Suspense in Next.js?

What is the Full Route Cache in Next.js?