LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1514 min read

Parallel Routes

Render multiple independent pages into the same layout at once using named @slots.

What Are Parallel Routes?

Parallel routes let a single layout render more than one page at the same time, each independently — for example, an analytics panel and a notifications feed that load, error, and update on their own, side by side, in the same layout.

Named Slots

A parallel route is defined as a folder prefixed with @, called a slot. Slots are passed into their parent layout as props, matching the folder name.

app/dashboard/
├── layout.tsx
├── @analytics/
│   └── page.tsx
└── @notifications/
    └── page.tsx
// app/dashboard/layout.tsx
export default function DashboardLayout({ children, analytics, notifications }) {
  return (
    <div className="dashboard-grid">
      <main>{children}</main>
      <section>{analytics}</section>
      <aside>{notifications}</aside>
    </div>
  );
}

Example: A Dashboard with Independent Panels

Each slot behaves like its own mini route — it can have its own loading.tsx and error.tsx, so a slow analytics panel doesn't block the notifications panel from rendering, and an error in one doesn't crash the other.

default.tsx

When navigating to a sub-route that a slot has no matching page for, Next.js needs a fallback — this is what default.tsx provides, rendered when a more specific match isn't available for that slot.

Missing default.tsx

Without a default.tsx, navigating to a route that a slot can't match will cause a 404 for the whole page during client-side navigation — always add one for slots that don't cover every possible sub-path.

FAQs

No — like route groups, @slot folder names are not part of the URL; they only organize how the layout receives its props.

Mainly for complex, dashboard-like UIs with independently loading sections, or for modals that need their own route while a background page stays visible.

Summary

Parallel routes let independent sections of a page load and fail on their own terms. Next, you'll see intercepting routes, which are often paired with parallel routes to build modals.

Next Lesson →

Intercepting Routes