This content originally appeared on DEV Community and was authored by Vishwark
Next.js App Router introduced two advanced routing primitives:
- Parallel Routes
- Intercepting Routes
These aren’t random features — they were invented to solve challenges that naturally arise in file-based routing.
This guide explains Parallel Routes from scratch (no use case at first), then naturally introduces the real-world modal use case, shows why Parallel Routes fail alone, and how Intercepting Routes solve that problem. Finally, we’ll cover all interception patterns (.), (..), (..)(..), (...) with real URLs — and end with practical use cases.
Let’s begin.
🟦 1. What Are Parallel Routes?
Parallel Routes allow a layout to render multiple independent route segments at the same time.
Example layout:
export default function RootLayout({ children, modal }) {
return (
<>
{children}
{modal}
</>
);
}
This layout expects two branches:
-
children→ normal page content -
modal→ secondary UI (modal/sidebar/etc.)
Folder Structure
app/
├─ layout.tsx
├─ page.tsx
└─ @modal/
├─ default.tsx
└─ settings/page.tsx
Visiting /
- children → page.tsx
- modal → default.tsx
Visiting /settings
- children → still page.tsx
- modal → settings/page.tsx
No modals yet. No use-case assumed.
Parallel routes simply let you render two active routes simultaneously.
🟩 2. Important Nuance — Modal Slots Must Be in a Layout, Not a Page
Parallel route slots (modal, sidebar, feed) only work in layout.tsx.
They DO NOT work in page.tsx.
This is a common mistake:
❌ This will NEVER work:
export default function Page({ modal }) {
return <>{modal}</>;
}
✔ Correct place:
// layout.tsx
export default function RootLayout({ children, modal }) {
return (
<>
{children}
{modal}
</>
);
}
Parallel routes are injected only into layouts.
🟥 3. Introducing the Real Use Case
Most real apps want this behavior:
✔ Internal navigation → show modal
/posts → /posts/42 → modal over the list
✔ Direct URL or refresh → show full page
/posts/42 → full-page view
This is how:
- Instagram post modals
- Twitter image modals
- YouTube video modals
- Airbnb listing modals
all work.
Let's see why parallel routes fail for this use case.
🟥 4. Why Parallel Routes Fail Alone
Folder you might create:
app/
├─ posts/page.tsx
├─ posts/[id]/page.tsx
└─ @modal/
├─ default.tsx
└─ posts/[id]/page.tsx
Scenario 1 — /posts → /posts/42
Matches:
- children → full page
- modal → modal version
❌ Renders both — wrong.
Scenario 2 — reload /posts/42
Same matches:
- children → full page
- modal → modal version
❌ Shows both on refresh — wrong.
Scenario 3 — open /posts/42 directly
Same matches again
❌ wrong behavior.
Why?
Because parallel routes match purely based on the filesystem, not on navigation context.
They cannot know:
- Did user come from
/posts? - Did user refresh?
- Did user open the URL directly?
- Did user come from another screen?
They ALWAYS show the modal if the route exists.
So parallel routes alone are not enough.
🟦 5. The Fix — Intercepting Routes
Intercepting Routes let you control when a route should render.
Correct folder structure:
app/
├─ posts/page.tsx
├─ posts/[id]/page.tsx
└─ @modal/
├─ default.tsx
└─ (.)posts/[id]/page.tsx
That (.) prefix tells Next.js:
“Use THIS version ONLY on internal navigation from the same route level.”
And suddenly everything behaves correctly:
| Scenario | children | modal |
|---|---|---|
/posts → /posts/42 |
list stays | modal appears |
reload /posts/42
|
full page | empty |
/home → /posts/42 |
full page | empty |
open /posts/42 directly |
full page | empty |
Parallel + Intercepting Routes give you PERFECT modal UX.
🟪 6. All Intercepting Route Prefixes Explained (With Real URLs)
Next.js provides 4 interception patterns.
Let’s use real URLs to understand them.
1️⃣ (.) — Same-Level Interception
Working folder:
@modal/(.)posts/[id]/page.tsx
Works for:
/posts → /posts/42 → modal ✔
Does NOT intercept:
refresh /posts/42
/home → /posts/42
This is the most common form.
2️⃣ (..) — One Level Up
Example URLs:
/settings/profile
/settings/profile/edit
/settings/edit
Desired UX:
- Modal only when user comes from profile
Folder:
@modal/(..)settings/profile/edit/page.tsx
Works:
/settings/profile → /settings/profile/edit → modal ✔
Does NOT:
/settings → /settings/profile/edit
refresh /settings/profile/edit
3️⃣ (..)(..) — Two Levels Up
Useful for deep URLs.
Example:
/dashboard/users
/dashboard/users/42
/dashboard/users/42/edit
Intercept only when navigation comes from /dashboard/users:
@modal/(..)(..)dashboard/users/[id]/page.tsx
4️⃣ (...) — Root-Level Interception
Useful for global modals like /login and /signup.
@modal/(...)login/page.tsx
Works (modal):
/home → /login
/posts → /login
Does NOT intercept:
refresh /login → full page
direct /login → full page
🎉 7. Real Use Cases Where You’ll Use These Features
Here are the most common scenarios where Parallel + Intercepting Routes shine:
1. Modal Detail View Over a List Page
/posts-
/posts/[id](modal over list) - reload
/posts/[id]→ full page This is the Instagram/Twitter/YouTube pattern.
2. Nested Settings With Modal Editor
Routes:
/settings/profile-
/settings/profile/edit(modal) -
/settings/edit(full page) Perfect for complex dashboards.
3. Global Login Modal
-
/loginshould be a modal when navigating internally - But a full page when visited directly Useful for onboarding flows.
4. Sidebar + Content + Modal All Active at Once
Parallel routes let you render:
- sidebar
- content
- modal each as independent routes.
5. Split View Apps (Inbox, Email, Admin UI)
Like Gmail:
/inbox-
/inbox/[id](preview) -
/inbox/[id]/details(modal or separate pane)
Parallel routes allow multiple panes to be alive simultaneously.
6. Music/Video Player That Stays While Navigating
Parallel route (player) + main route (content).
7. Multi-Step Flows With Side Panels
/reports/reports/create-
/reports/create/confirmWhere parts of UI should stay alive as separate routes.
🧠 Final Mental Model
✔ Parallel Routes
Keep multiple routes alive.
Good for: layout slots (sidebar, modal, feed, toolbar).
❌ But parallel routes ALWAYS match filesystem
Bad for modal behavior: duplicate content on reload.
✔ Intercepting Routes
Decide when to show modal:
- on internal navigation → modal
- on reload/direct link → full page
✔ Prefixes
-
(.)same-level -
(..)one level up -
(..)(..)two levels up -
(...)root-level
✔ Parallel route slot must be inside a layout, not inside a page
Conclusion 👨🏻🚀
Parallel Routes let you keep multiple route segments alive, and Intercepting Routes make them behave correctly by activating route only when appropriate. Together, they deliver the modern, context-aware routing experience that file-based routing cannot provide on its own — thanks for reading!
This content originally appeared on DEV Community and was authored by Vishwark
Vishwark | Sciencx (2025-11-16T10:15:33+00:00) 🚀 Parallel Routes & Intercepting Routes in Next.js — Complete Beginner-Friendly Guide. Retrieved from https://www.scien.cx/2025/11/16/%f0%9f%9a%80-parallel-routes-intercepting-routes-in-next-js-complete-beginner-friendly-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.