Parallel routes and slots in the App Router

A parallel route is a named slot: `@analytics` inside `app/dashboard/` renders into the same page, with its own `loading.tsx` and `error.tsx`. It is for independent panels and for modals that need a URL.

The minimal structure

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

The folder with the at sign adds no URL segment: `/dashboard` stays `/dashboard`. What changes is how many things the `layout` receives and can compose.

The layout receives slots as props

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

`children` is the implicit slot: the folder's `page.tsx`. The other slots take the folder name without the at sign. If the layout does not render a slot, that content does not appear and nothing warns you.

What they are actually for

• Dashboards whose panels load at different speeds: each slot gets its own waiting boundary.
• A modal with a shareable URL, by pairing the slot with an intercepting route.
• Tabs that keep their state when the reader switches section.
• Two views of the same page, one for the team and one for the client, without duplicating the layout.

For the active state there is `useSelectedLayoutSegment`, which takes the slot name. It only works in a client component: on the server the segment is not exposed as a hook.

// app/dashboard/@team/team-tabs.tsx
"use client";

import { useSelectedLayoutSegment } from "next/navigation";

export function TeamTabs() {
  const segment = useSelectedLayoutSegment("team");
  return {segment ?? "overview"};
}

The constraint that breaks deploys

Every slot needs a `default.tsx`. Without it, a direct visit to a URL that does not match the slot returns 404. Soft navigation hides the bug; it shows up on refresh or on the first visit from a link.

// app/dashboard/@analytics/default.tsx
export default function AnalyticsDefault() {
  return null;
}

The number that matters

The EneUI catalogue indexes 111,985 components, 1,556 blocks and 12,808 icons from 1,472 libraries, measured on 1 November 2026 at `/api/stats`. Three categories cover the slots: tabs, dashboard blocks and modals.

The slot inherits its waiting boundaries: read streaming and Suspense in the App Router. For isolated failure there is error boundaries in the App Router. For the general picture, how to structure an App Router project. For a framework comparison, Astro vs Next.js.

Known limitation: a slot is not a route. You cannot link to `/dashboard/@analytics`, and you cannot nest one slot inside another beyond the layout level that declares them.