Intercepting Routes
Show a route as a modal on top of the current page, while a direct visit or refresh still loads the full page.
What Are Intercepting Routes?
Intercepting routes let you load a route's content into an overlay on top of the current page when the user navigates to it from within your app, while still rendering the full, standalone page if the user visits that same URL directly or refreshes.
The classic example: clicking a photo in a feed opens it in a modal, but sharing or refreshing that photo's URL opens the full photo page instead.
The (.) Convention
Intercepting routes use a dot-based folder prefix to describe how many levels up the intercepted route lives, relative to the folder doing the intercepting.
| Convention | Meaning |
|---|---|
| (.)folder | Intercept a route at the same level |
| (..)folder | Intercept a route one level up |
| (..)(..)folder | Intercept a route two levels up |
| (...)folder | Intercept a route from the app/ root |
Example: A Photo Modal
app/├── feed/│ ├── page.tsx → /feed│ └── @modal/│ ├── default.tsx│ └── (.)photo/[id]/│ └── page.tsx → intercepted modal view└── photo/[id]/ └── page.tsx → full standalone pageClicking a photo link while on /feed renders the intercepted (.)photo/[id]/page.tsx as a modal, using the @modal parallel slot. Visiting /photo/42 directly (or refreshing) instead renders the standalone app/photo/[id]/page.tsx.
Intercepting routes are almost always combined with a parallel route slot (like @modal) so the modal can render alongside the original page rather than replacing it.
FAQs
No — a simple client-side modal with local state works fine for many cases. Intercepting routes solve the specific problem of a modal that also needs its own shareable, refreshable URL.
The interception behavior relies on client-side navigation, so it applies during in-app navigation; a direct request always gets the standalone page regardless.
Summary
Intercepting routes give you shareable-URL modals without duplicating page logic. Next, you'll look at how navigation itself works with next/link and the useRouter hook.