Parallel Routes (@slot)

Render multiple pages simultaneously in one layout.

Next.js6 min readConcept 18 of 65

The @slot syntax

Parallel Routes allow you to display multiple, completely independent pages within the exact same layout.

You define them using 'slots', which are folders prefixed with an @ symbol (e.g., @team or @analytics). These folders do not affect the URL structure.

Independent lifecycles

Why not just import a <Team /> and <Analytics /> component directly into the page?

Because components are tied to the page's lifecycle. With Parallel Routes, each slot acts as its own mini-application. If @analytics crashes, only the analytics section shows an error boundary. If @team takes 5 seconds to load data, it shows a localized loading spinner while the rest of the dashboard remains fully interactive.

Passing slots as props

When you create app/@team/page.tsx and app/@analytics/page.tsx, Next.js automatically passes them as props to the layout.tsx file in the same directory.

Your layout receives them alongside children: export default function Layout({ children, team, analytics }).

Independent Lifecycles

Click 'Load Dashboard'. Watch how the @team and @analytics slots load entirely independently. If one is slow, it doesn't block the other.

Independent Suspense Boundaries

Dashboard Layout
children
@team
Waiting for request...
@analytics
Waiting for request...
app/layout.tsx
export default function Layout({
children,// Implicit @children slot
team,
analytics
}) {
return (
<DashboardWrapper>
{children}
{team}
{analytics}
</DashboardWrapper>
)
}

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1If you create a folder named @sidebar next to layout.tsx, how do you render it inside the layout?
  2. 2What happens if @team loads instantly, but @analytics takes 4 seconds to fetch data?

Remember this

  • Define a parallel route by prefixing a folder with @.
  • Slots are passed as props to the nearest layout.tsx.
  • Each slot has independent loading, error, and navigation states.
  • The children prop is just an implicit @children slot.

Done with this concept?

Mark it complete to track your progress. No login needed.