Parallel and Intercepting Routes

Parallel routes let one layout render several independent slots at once, and intercepting routes let a route render inside the current layout instead of on its own page.

A folder prefixed with @ like @team or @analytics is a named slot. The layout in the same folder receives each slot as a prop and can render them simultaneously, each with its own independent loading and error states.

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

export default function Layout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode
  team: React.ReactNode
  analytics: React.ReactNode
}) {
  return (
    <section>
      {children}
      <div className="grid">
        {team}
        {analytics}
      </div>
    </section>
  )
}

When you navigate to a route that a slot does not define, Next.js renders that slot’s default.tsx instead. Without it a hard navigation to an unmatched slot throws, so add one that returns null or calls notFound().

// app/dashboard/@team/default.tsx
export default function Default() {
  return null
}

Intercepting route conventions render a route inside the current layout while the URL still updates. The prefix matches segment levels: (.) for the same level, (..) for one level up, and (...) from the app root. The classic use is a photo modal: click a photo in a feed and it opens over the feed as a modal, but a direct visit to that URL renders the full page.

app/
  feed/
    page.tsx
    @modal/
      (..)photo/
        [id]/page.tsx   // intercepts /photo/[id] as a modal
  photo/
    [id]/page.tsx       // the full standalone page

// app/feed/@modal/(..)photo/[id]/page.tsx
export default async function PhotoModal({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  return <dialog open>Photo {id} in a modal over the feed</dialog>
}

Parallel and Intercepting Routes

The idea in one sentence

Parallel routes with named slots

The default.tsx fallback

Intercepting routes