Intercepting Routes for Shared Modal Experiences
Use the (.) and (..) conventions to show content as a modal while keeping a shareable URL.
What Are Intercepting Routes?
Next.js 15 introduces intercepting routes — a routing convention that lets you load a route within the context of the current layout, rather than navigating to a completely new page.
The most common use case is a modal pattern: clicking a photo in a grid shows it in a modal overlay, but the URL updates to /photos/42. If you share that URL, the recipient sees the full photo page — not the modal.
- The browser URL changes (shareable, bookmarkable)
- The current page stays visible behind the modal
- Hard refresh or direct navigation loads the full standalone page
This is sometimes called the modal soft-navigation pattern, popularised by Pinterest, Instagram, and Vercel's own site.
The Interception Conventions: (.) and (..)
Next.js uses folder-name prefixes to declare that one route intercepts another. The prefix mirrors relative path syntax:
(.)— intercept a route at the same level in the segment tree(..)— intercept a route one level up(...)— intercept a route from the app root
The folder named with these prefixes lives inside a parallel route slot (a folder prefixed with @), so the two features work together.
Example: to intercept /photos/[id] from the / home page, you create app/@modal/(.)photos/[id]/page.tsx.
All lessons in this course
- Parallel Routes with Named Slots and Default Segments
- Intercepting Routes for Shared Modal Experiences
- Conditional Slot Rendering for Dashboards and Tabs
- Building a Photo-Modal Flow with Soft Navigation