Next.js
/Advanced
Intercepting Routes
Definition
A routing mechanism that allows you to load a route within the current layout while keeping the context of the current page, usually used for modals.
Explain Like I'm New
You are scrolling an Instagram feed (`/feed`). You click a photo. Instead of navigating away to a new page (`/photo/123`), the photo pops up in a Modal OVER the feed. But the URL *does* change to `/photo/123`. If you refresh the page, you go to the standalone photo page.
Real World Example
Photo lightboxes (Instagram), expandable task cards (Trello), or shopping cart quick-views. Clicking the item intercepts the navigation and shows a modal instead.
Common Use Cases
- •Modals
- •Lightboxes
- •Context-preserving UI
Terminal Output
bash / terminal
/*
File Structure for a Photo Modal Intercept:
app/
├── feed/
│ ├── page.tsx <-- The main feed
│ └── (.)photo/ <-- INTERCEPTOR: Catches clicks to /photo
│ └── [id]/page.tsx <-- Returns a MODAL overlaid on the feed
└── photo/
└── [id]/page.tsx <-- STANDALONE: Triggers if user refreshes the page directly
*/
Interview Questions
basic
- What syntax is used to create an intercepting route matching the same level?
intermediate
- Why are intercepting routes better than just using a standard React `<Modal>` component with `useState`?