Intercepting Routes: (..)photo URL Soft-Navigation Modals
- Last updated
- Prerequisites:
- Next.js App Router basics
- Understanding of parallel routes and dynamic segments
- nextjs
- intercepting-routes
- modals
- app-router
- navigation
- soft-navigation
Read at your depth
The practical view
Intercepting routes let you render a route in a different context when navigated to from a specific place. The syntax uses a folder with parentheses and dots: (.)same-level, (..)one-level-up, (..)(..)two-levels-up, (...)root. Example: app/feed/(..)photo/[id]/page.tsx intercepts /photo/1 when navigated to from /feed, rendering a modal over the feed, while the real /photo/1 route still exists. Combined with parallel routes, this is the canonical pattern for modals that update the URL: the modal content intercepts the navigation and renders in a @modal slot.
The same idea in other frameworks
React Router's nested-outlet modals and route masking approximate interception.Angular auxiliary routes (named outlets) give similar overlay-with-URL behavior.Vue Router's nested routes + dynamic components mimic intercepting modals.SvelteKit modal patterns use the same slot approach without a built-in interception primitive.Legacy vs modern
Modal without URL sync vs intercepting route modal
A plain modal doesn't update the URL (not shareable/deep-linkable); intercepting routes give modal UX with real URL semantics.
const [open, setOpen] = useState(false); // ❌ OLD: modal state only in the clientapp/feed/(..)photo/[id]/page.tsx + @modal parallel slot → URL /photo/1 with modal UXInterview gotchas
Context
This is the defining behavioral question about interception — interviewers want the soft-vs-hard navigation distinction to confirm you understand when interception applies.
The mechanical answer
Interception applies to client-side soft navigation: when the Next.js router navigates within the app, it can match the target URL against an intercepting segment relative to the current tree and choose the intercepted render. A hard navigation (browser refresh, direct URL entry, or opening a link in a new tab) resolves the URL from the document root, so only the real (non-intercepted) route matches — the modal context is lost and the full photo page renders. This is intentional, not a bug: it means the URL always has a canonical real page, and the modal is an enhanced in-app experience. The same URL (/photo/1) serves both, with the presentation depending on navigation type.
Trap
The naive answer is 'interception is broken after refresh'. It's the designed fallback: the real page exists precisely so deep links and refreshes work. Another trap: assuming interception works on hard navigation — it does not, by design. Candidates who explain the soft-vs-hard resolution and the dual-route model show real understanding.
Context
This probes the segment-relative matching model — interviewers want to confirm you understand that interception is relative to the active route, not absolute, and what each prefix means.
The mechanical answer
The prefix indicates how many levels up from the current segment the intercepted target should be matched: (.) matches a sibling at the same level, (..) matches one level up, (..)(..) two levels up, and (...) matches from the app root. The match is computed relative to the currently active segment in the route tree at the time of navigation. For example, app/feed/(..)photo/[id] intercepts /photo/[id] when the user is at /feed/... because photo is one level above feed. The relative nature is what makes the same intercepting folder behave correctly from different contexts — the router resolves the target pattern against the current path depth.
Trap
The naive answer is 'the dots are just visual sugar'. They are relative path depth markers used by the router's tree matching. Another trap: assuming (..) always means 'parent directory in the filesystem' — it means one segment up from the CURRENT match context, which can differ from the literal folder path. Candidates who describe the current-tree-relative resolution show real App Router depth.