Parallel Routes — @slot

An @slotName folder gives the parent layout an extra named child prop, letting you render two or more pages side by side.

4 min read Level 3/5 #nextjs#parallel-routes

What you'll learn

Define `@team` and `@analytics` slots
Receive each slot as a named prop in the layout
Use parallel routes for dashboards and routed modals

Parallel routes let one layout host more than one page at a time. They are how Next.js builds split dashboards, routed modals, and conditional UI without nesting.

The @slot Convention

Inside a segment, create folders prefixed with @. Each becomes a named prop on the segment’s layout.

app/dashboard/
  layout.tsx
  @team/page.tsx
  @analytics/page.tsx
  page.tsx

The layout now receives team and analytics in addition to children.

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode;
  team: React.ReactNode;
  analytics: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-2 gap-4">
      <section>{team}</section>
      <section>{analytics}</section>
      <section className="col-span-2">{children}</section>
    </div>
  );
}

Each slot is a real route tree. It has its own page.tsx, loading.tsx, and error.tsx.

Slots Navigate Independently

You can navigate within a slot without affecting the others. That makes parallel routes great for dashboards where each pane reloads on its own.

default.tsx for Unmatched Slots

When a URL does not match a route within a slot, that slot falls back to a default.tsx. Without one, the unmatched slot becomes a 404 for the entire page.

// app/dashboard/@team/default.tsx
export default function TeamDefault() {
  return <p>Select a team</p>;
}

Use Cases

Two-column dashboards with independent navigation
Routed modals (the modal lives in a slot, the page lives in children)
Conditional UI based on the user — render one slot or another in the layout

Parallel routes pair beautifully with intercepting routes, which we cover next.

Intercepting Routes →