Intercepting Routes (..)
Context-aware routing for modals and overlays.
The modal problem
Historically, building modals that update the URL without losing the background page was extremely difficult.
Next.js solves this with Intercepting Routes. Using relative path conventions like (.) to match the same level, or (..) to match one level up, you can 'intercept' a route request and show a different UI than the standalone page.
Soft vs Hard Navigation
The magic of Intercepting Routes is that they only trigger during client-side (soft) navigation.
If a user is looking at a feed (/feed) and clicks a link to /photo/1, Next.js intercepts it and pops open a modal. However, if the user hits refresh, or shares that /photo/1 URL with a friend, Next.js performs a hard navigation and renders the *standalone* photo page instead.
The syntax
The syntax mimics relative file paths, but applies to route segments, not physical folders:
(.) matches segments on the same level.
(..) matches segments one level above.
(...) matches segments from the root app directory.
The Modal Illusion
Click a photo to trigger a soft navigation (intercepting the route for a modal). Then click the 'Simulate Refresh' button to see how a hard navigation bypasses the interceptor entirely.
My Photo Feed
This was a soft navigation. The URL changed, but the feed remains mounted in the background.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- Intercepting Routes trigger only on soft client-side navigation.
- Hard navigations (refresh, direct link) bypass the interceptor and load the standalone page.
- Syntax uses
(.),(..), and(...)based on route segment levels. - They are almost always used inside a Parallel Route (
@modal) to create overlays.
Done with this concept?
Mark it complete to track your progress. No login needed.