Parallel Routes

Parallel routes let a single layout render multiple independently navigable pages at once — for example a dashboard main area and a metrics sidebar. This lesson covers @slot folders, default.tsx, and when parallel routes beat nested layouts alone.

Named Slots with @folder Folders

In the App Router, a folder whose name starts with @ defines a parallel route slot. A layout can then receive that slot as a prop alongside children. For example, app/dashboard/@analytics/page.tsx and app/dashboard/@team/page.tsx can render side by side inside app/dashboard/layout.tsx.

Each slot navigates independently: soft navigation can update one pane without remounting the others. That makes parallel routes a strong fit for complex dashboards, split views, and modal patterns when combined with intercepting routes.

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <div>
      <section>{children}</section>
      <aside>{analytics}</aside>
      <aside>{team}</aside>
    </div>
  );
}

// Folders:
// app/dashboard/@analytics/page.tsx  → analytics prop
// app/dashboard/@team/page.tsx       → team prop
// app/dashboard/page.tsx             → children

Slot folder names become layout prop names after dropping the @ — @analytics arrives as the analytics prop.

default.tsx Soft Navigation Fallback

app/dashboard/
  layout.tsx
  page.tsx
  @analytics/
    page.tsx
    default.tsx   // shown when this slot has no matching segment
  @team/
    page.tsx
    default.tsx

Without default.tsx, soft navigation into a URL that doesn't match every slot can 404 or blank that slot.
default.tsx is the fallback content for a slot when no matching parallel page exists for the current URL.
Hard navigations (full page load) require matching active segments for each slot, or a default.
Slots are not part of the URL path — @analytics does not become /analytics in the address bar.

Parallel Routes Cheat Sheet

Rules for defining and consuming slots.

Concept	Detail
Slot folder	`@name` under a shared layout
Layout prop	Same name as the slot without `@`
URL impact	Slots do not appear as path segments
`default.tsx`	Fallback when a slot has no matching page
Typical use	Dashboards, split panes, conditional side panels

When Parallel Routes Help

Prefer parallel routes when panes have independent URLs, loading states, or error boundaries. If you only need nested UI with a shared layout and single navigation, a regular nested layout is simpler and usually enough.

Need	Prefer
Shared chrome around one page tree	Nested `layout.tsx` only
Two panes with separate URLs / loading	Parallel routes (`@slots`)
Modal that keeps the underlying page visible	Parallel + intercepting routes

Common Mistakes

Expecting @analytics to create a /analytics URL segment — slots are invisible in the path.
Omitting default.tsx and seeing blank panes or 404s during client navigations.
Overusing parallel routes for simple nested UI that a single layout can handle.
Forgetting to render every slot prop in the layout, which silently hides that pane.

Key Takeaways

Parallel routes use @folder slots that a parent layout receives as named props.
Slots do not add URL path segments; they compose multiple pages into one layout.
default.tsx provides a fallback when a soft navigation does not match a slot.
They shine for dashboards and multi-pane UIs with independent navigation.
Prefer simpler nested layouts when you do not need independent slot URLs.

Pro Tip

Always add a minimal default.tsx (even return null) for each slot during development — most confusing parallel-route 404s disappear once every slot has a soft-navigation fallback.