Parallel Routes in Next.js: Build Complex Dashboards Easily

Dashboards often need several independent sections on one screen: a sidebar, main content, analytics widgets, and maybe a settings panel. With the standard App Router you'd nest routes and re-render the whole layout. Parallel routes let you show multiple pages in the same layout at once, each with its own loading and error state. This guide shows you how to use them to build complex dashboards without the mess.

What are parallel routes?

Parallel routes use slots—named segments that the layout can render in parallel. Each slot is a separate page.tsx (or a default). The same URL can fill multiple slots, and each slot can load and error independently. That's ideal for dashboards: one route, multiple panels.

• Slots are defined by folders whose names are wrapped in parentheses: @analytics, @team, @settings.
• Each slot has its own page.tsx, loading.tsx, and error.tsx.
• The parent layout.tsx receives each slot as a prop and renders them side by side.

Folder structure

Example: a dashboard with Analytics, Team, and Settings as parallel slots.

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

Layout: receiving and rendering slots

The layout receives each slot as a prop. You must pass every slot into the layout or the slot won't render.

Default and default.js

When a slot doesn't match the current navigation, provide a default.tsx.

Loading and error per slot

Each slot can have its own loading.tsx and error.tsx.

Combining with intercepting routes

You can combine parallel routes with intercepting routes.

Wrap-up

Parallel routes give you multiple independent panels in one layout—perfect for dashboards.