0Pricing
Next.js 15 Fullstack Web Apps · Lesson

Parallel and Intercepting Routes

Implement advanced UI patterns like parallel routes for independent sections and intercepting routes for modal-like experiences.

Parallel and Intercepting Routes is a free Next.js 15 Fullstack Web Apps lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack Web Apps learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Advanced Routing Patterns

Welcome! In this lesson, we'll dive into two powerful Next.js App Router features: Parallel Routes and Intercepting Routes.

These patterns help you build more complex, flexible, and performant user interfaces.

Independent UI with Parallel Routes

Parallel Routes allow you to render multiple independent views or "slots" within the same layout, at the same time.

Think of a dashboard with different sections (e.g., analytics, recent activity) loading independently, or a social media feed with a profile sidebar.

Defining Parallel Route Slots

You define a parallel route by creating a folder prefixed with @, like @team or @analytics, inside your layout's directory.

  • Each @slot folder contains its own page.js or route.js.
  • The parent layout.js receives these slots as props.

Parallel Routes File Structure

Here's how you might set up a dashboard with two parallel slots: @users and @reports. The main layout.js renders both.

File Structure:

app/
├── dashboard/
│ ├── @users/
│ │ └── page.js
│ ├── @reports/
│ │ └── page.js
│ └── layout.js
└── page.js

Parallel Route Layout Code

The layout.js receives the parallel slots as props and renders them. If a slot isn't active for the current URL, Next.js can render a default.js.

/* app/dashboard/layout.js */
export default function DashboardLayout({ children, users, reports }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: 1 }}>{users}</div>
        <div style={{ flex: 1 }}>{reports}</div>
      </div>
      {children} {/* Renders content of dashboard/page.js if present */}
    </div>
  );
}

/* app/dashboard/@users/page.js */
export default function UsersPage() {
  return (
    <div style={{ border: '1px solid blue', padding: '10px' }}>
      <h2>Users Section</h2>
      <p>List of active users...</p>
    </div>
  );
}

/* app/dashboard/@reports/page.js */
export default function ReportsPage() {
  return (
    <div style={{ border: '1px solid green', padding: '10px' }}>
      <h2>Reports Section</h2>
      <p>Monthly sales report...</p>
    </div>
  );
}

Intercepting Routes for Modals

Intercepting Routes allow you to "catch" a route from within the current layout and display it as an overlay or modal, without changing the browser's URL.

This is perfect for showing image galleries, product details, or login forms on top of the current page.

Defining Intercepting Routes

Intercepting routes use the (.), (..), or (...) conventions to match segments at different levels relative to the current route.

  • (.)segment: Catches a segment at the same level.
  • (..)segment: Catches a segment one level above.
  • (...)segment: Catches a segment at the root app directory level.

Intercepting a Sibling Route

Imagine a photo gallery. When you click a photo, instead of navigating to /photos/123, a modal opens, but the URL remains /photos.

File Structure:

app/
├── photos/
│ ├── @modal/(.)[id]/
│ │ └── page.js
│ ├── page.js
│ └── layout.js

Intercepting Route Code Example

Here's a simplified example for a photo modal. The @modal slot catches the [id] route when navigated from /photos, displaying it as an overlay.

/* app/photos/page.js */
import Link from 'next/link';

export default function PhotosPage() {
  const photos = [{ id: '1', title: 'Sunset' }, { id: '2', title: 'Mountain' }];
  return (
    <div>
      <h1>My Photos</h1>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
        {photos.map(photo => (
          <Link key={photo.id} href={`/photos/${photo.id}`}>
            <div style={{ border: '1px solid #ccc', padding: '10px', textAlign: 'center' }}>
              <h3>{photo.title}</h3>
              <p>(Click to view)</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

/* app/photos/@modal/(.)[id]/page.js */
export default function PhotoModal({ params }) {
  return (
    <div style={{
      position: 'fixed', top: '0', left: '0', right: '0', bottom: '0',
      backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex',
      justifyContent: 'center', alignItems: 'center'
    }}>
      <div style={{ background: 'white', padding: '20px', borderRadius: '8px' }}>
        <h2>Photo ID: {params.id}</h2>
        <p>This is a modal for photo details.</p>
        <Link href="/photos">Close Modal</Link>
      </div>
    </div>
  );
}

When to Use Which Pattern

Parallel Routes are for displaying multiple, independent sections of UI simultaneously in a fixed layout (e.g., dashboards).

Intercepting Routes are for displaying content on top of the current page, typically as a modal, without changing the underlying URL (e.g., image viewers).

They solve different but equally important UI challenges!

Route Pattern Challenge

Consider a social media profile page. You want to display a user's posts on the left and their followers list on the right, both updating independently. Additionally, clicking a post should open its full view in a modal.

Which routing patterns would best achieve these two distinct UI requirements?

Recap: Advanced Routing

Great job! You've learned about two powerful Next.js App Router features:

  • Parallel Routes (@slot folders) for displaying independent UI segments side-by-side.
  • Intercepting Routes ((.), (..), (...) conventions) for catching routes and showing them as overlays or modals.

These patterns unlock advanced UI compositions for complex applications.

Frequently asked questions

Is the “Parallel and Intercepting Routes” lesson free?

Yes — the full text of “Parallel and Intercepting Routes” is free to read here on the web, and the Next.js 15 Fullstack Web Apps course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack Web Apps course, upgrade to CoddyKit PRO.

What will I learn in “Parallel and Intercepting Routes”?

Implement advanced UI patterns like parallel routes for independent sections and intercepting routes for modal-like experiences. You practise Next.js 15 Fullstack Web Apps with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack Web Apps?

No prior experience is required. Next.js 15 Fullstack Web Apps on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Parallel and Intercepting Routes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack Web Apps lesson?

Yes. Every Next.js 15 Fullstack Web Apps lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Dynamic Routes and Catch-all Segments
  2. Nested Layouts and Route Groups
  3. Parallel and Intercepting Routes
  4. Loading and Error UI Conventions
← Back to Next.js 15 Fullstack Web Apps