App Router Mastery

Parallel and Intercepting Routes

0:00

0% complete

LearnStep 1 of 4

Parallel Routes with Slots

Learning Objectives

•Understand parallel routes with @slots
•Implement conditional rendering with parallel routes
•Build modal patterns with intercepting routes
•Handle loading and error states for slots

Lesson Outline

LearnStep 1/4

Parallel Routes with Slots

Parallel Routes: Render Multiple Pages Simultaneously

Parallel routes allow you to render multiple pages in the same layout simultaneously. They're defined using named slots with the @folder convention.

The Problem They Solve

Imagine a dashboard where you want to show:

A main content area
A sidebar with notifications
A modal overlay (conditionally)

Each of these could have its own loading/error states and navigation.

Slot Syntax

Consuming Slots in Layout

tsx

Key Point: Each slot is a prop passed to the layout. The children prop is the implicit slot for the main page.

Default Files

When a slot doesn't have content for the current URL, Next.js looks for default.tsx:

tsx

Conditional Rendering with Auth

tsx