Demo
Intercepting Routes
- Intercepting routes allow you to show a route within a different context while preserving the URL.
- Perfect for modal patterns where you want a full page to open as a modal from a list.
- Uses special folder naming conventions to define interception levels.
- The intercepted version is shown on client navigation; the full page version on direct URL access or refresh.
- Combines with parallel routes (
@folder) to render modals alongside the main content.
Folder Structure
1app/2├── @modal/3│ ├── default.tsx # Returns null when no modal4│ └── (.)photo/5│ └── [id]/6│ └── page.tsx # Intercepted modal version7├── photo/8│ └── [id]/9│ └── page.tsx # Full page version10├── layout.tsx # Renders {children} and {modal}11└── page.tsx # Main gallery page
Convention Prefixes
| Prefix | Description |
|---|---|
(.) | Match segments on the same level |
(..) | Match segments one level above |
(..)(..) | Match segments two levels above |
(...) | Match segments from the root |
Demo
- Click a product in the gallery to see it open in a modal.
- The URL changes but the gallery stays visible behind the modal.
- Press Escape or click outside to close the modal.
- Open a product URL directly (new tab) to see the full page version.
- Refresh the page while a modal is open to see the full page render.
Key Files
@modal/default.tsx- Returnsnullwhen no modal is active@modal/(.)photo/[id]/page.tsx- The intercepted modal versionphoto/[id]/page.tsx- The full page versionlayout.tsx- Renders bothchildrenandmodalslots
Visual Summary
Gallery → Modal → Full page
List view
Intercepted modal
Direct URL
Full page
Client navigation shows the modal; direct access renders the full page.
Key Takeaways
| Topic | Guidance |
|---|---|
| UX | Use for modals or contextual overlays |
| Routing | Intercepted routes preserve URLs |
| Fallback | Full page renders on refresh or direct access |
Pitfalls & Tips
- Always provide a non-modal full page for direct navigation.
- Keep modal content lightweight to avoid jarring transitions.
Links
layout.tsx
page.tsx (Cached)
Photo Gallery (8)
