Parallel Routes

What parallel routes do

A single layout can render multiple route segments at once, each with its own loading and error boundaries. Slots are declared with the @name folder convention. The layout receives each slot as a named prop.

app/
  layout.tsx          # receives @analytics, @team
  page.tsx            # default slot → children
  @analytics/
    page.tsx          # rendered as analytics
    loading.tsx
  @team/
    page.tsx          # rendered as team
    error.tsx

Independent loading and errors

Each slot has its own Suspense and error boundary. The team panel can load fast and the analytics panel can take its time without freezing each other.

Always provide `default.tsx`

On a hard navigation/refresh, Next.js can't always tell what state a parallel slot was in. Without default.tsx, you get a 404 for the slot. Provide a sensible fallback.

Use a parallel slot when an area has an independent navigation, loading, or failure lifecycle. Dashboard panels that can stream and fail separately are good candidates. Cards that always share the same data and route state are usually simpler as ordinary components. Soft navigation can preserve slot state and make an incomplete implementation look correct. A refresh has no remembered state. That is why default.tsx is a recovery contract rather than decorative fallback UI.

Delay one slot, throw in another, and verify that the remaining content stays useful. Then enter through a deep URL and refresh. Every slot should either resolve from the URL or render an intentional default instead of surprising the user with a 404.

Code

Layout consumes slots·tsx

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

Each slot has its own loading·tsx

// app/@analytics/loading.tsx
export default function AnalyticsLoading() {
  return <div className="h-40 animate-pulse rounded-lg bg-gray-100" />;
}

// app/@analytics/page.tsx
export default async function Analytics() {
  const stats = await getAnalytics(); // slow
  return <AnalyticsPanel stats={stats} />;
}

Default fallback prevents the 404·tsx

// app/@analytics/default.tsx
export default function Default() {
  return null; // or a placeholder
}

What parallel routes do

Independent loading and errors

Always provide `default.tsx`

Code

External links

Exercise

Progress

Comments 0

What parallel routes do

Independent loading and errors

Always provide default.tsx

Code

External links

Exercise

Progress

Always provide `default.tsx`