Intercepting Routes

1
app/
2
├── @modal/
3
│   ├── default.tsx         # Returns null when no modal
4
│   └── (.)photo/
5
│       └── [id]/
6
│           └── page.tsx    # Intercepted modal version
7
├── photo/
8
│   └── [id]/
9
│       └── page.tsx        # Full page version
10
├── layout.tsx              # Renders {children} and {modal}
11
└── page.tsx                # Main gallery page

Convention Prefixes

Demo

1. Click a product in the gallery to see it open in a modal.
2. The URL changes but the gallery stays visible behind the modal.
3. Press Escape or click outside to close the modal.
4. Open a product URL directly (new tab) to see the full page version.
5. Refresh the page while a modal is open to see the full page render.

Key Files

• @modal/default.tsx - Returns null when no modal is active
• @modal/(.)photo/[id]/page.tsx - The intercepted modal version
• photo/[id]/page.tsx - The full page version
• layout.tsx - Renders both children and modal slots

Visual Summary

Key Takeaways

Pitfalls & Tips

• Always provide a non-modal full page for direct navigation.
• Keep modal content lightweight to avoid jarring transitions.

Links

• Intercepting Routes
• Parallel Routes
• Modal Example