DEV Community

Cover image for 🚀 Parallel Routes & Intercepting Routes in Next.js — Complete Beginner-Friendly Guide
Vishwark
Vishwark

Posted on

🚀 Parallel Routes & Intercepting Routes in Next.js — Complete Beginner-Friendly Guide

#webdev #react #nextjs #frontend

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}
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}</>;
}
Enter fullscreen mode Exit fullscreen mode

✔ Correct place:

// layout.tsx
export default function RootLayout({ children, modal }) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Desired UX:

  • Modal only when user comes from profile

Folder:

@modal/(..)settings/profile/edit/page.tsx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Intercept only when navigation comes from /dashboard/users:

@modal/(..)(..)dashboard/users/[id]/page.tsx
Enter fullscreen mode Exit fullscreen mode

4️⃣ (...) — Root-Level Interception

Useful for global modals like /login and /signup.

@modal/(...)login/page.tsx
Enter fullscreen mode Exit fullscreen mode

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

  • /login should 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/confirm Where 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!

Top comments (0)