Parallel Routes

~24 min · parallel routes, @slot, dashboard

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

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.

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
}

External links

Parallel routes

Exercise

Add an @analytics slot to your dashboard layout that renders a chart with a loading.tsx fallback. Verify (in the network tab) that the main page renders before analytics finishes loading.

Parallel Routes

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`