Parallel routes (@slot) in NextJS - Step-by-Step Execution

Concept Flow - Parallel routes (@slot)

User navigates to route

↓

Next.js matches route

↓

Render main layout

↓

Render parallel route slots

↓

Slot A

↓

Combine slots into page

↓

Display combined UI

When a user visits a route, Next.js renders the main layout and fills multiple parallel slots with different components simultaneously, then combines them to show the full page.

Execution Sample

NextJS

export default function Layout({ sidebar, content }) {
  return (
    <>
      {sidebar}
      {content}
    </>
  )
}

This code defines a layout with two parallel slots: sidebar and content, which Next.js fills with matching child routes.

Execution Table

Step	Action	Slot Name	Component Rendered	Resulting UI Part
1	User navigates to /dashboard	-	-	Start rendering dashboard page
2	Next.js renders main layout	-	Layout component	Layout with slots created
3	Render slot 'sidebar'	sidebar	SidebarComponent	Sidebar area filled
4	Render slot 'content'	content	ContentComponent	Main content area filled
5	Combine slots	sidebar + content	SidebarComponent + ContentComponent	Full dashboard page displayed
6	User interacts with sidebar	sidebar	SidebarComponent updates	Sidebar updates without affecting content
7	User navigates within content slot	content	ContentComponent updates	Content updates without affecting sidebar
8	Exit	-	-	Page fully rendered with parallel slots

💡 All parallel slots rendered and combined, page fully displayed

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
sidebar	undefined	SidebarComponent	SidebarComponent	SidebarComponent	SidebarComponent
content	undefined	undefined	ContentComponent	ContentComponent	ContentComponent
pageUI	empty	partial (sidebar)	partial (sidebar + content)	full page	full page

Key Moments - 2 Insights

Why do sidebar and content render separately but show together?

Because Next.js renders each slot in parallel (see steps 3 and 4 in execution_table), then combines them (step 5) to display the full page.

What happens if one slot updates, does the whole page re-render?

No, only the slot that changes re-renders (see steps 6 and 7), keeping other slots stable for better performance.

Visual Quiz - 3 Questions

Look at the execution_table, what component is rendered at step 3?

A ContentComponent

B SidebarComponent

C Page component

D No component rendered

💡 Hint

Check the 'Component Rendered' column at step 3 in execution_table

At which step does Next.js combine all slots into the full page?

A Step 2

B Step 4

C Step 5

D Step 7

💡 Hint

Look for the row mentioning 'Combine slots' in execution_table

If the user interacts only with the sidebar, what happens according to the execution_table?

A Only sidebar re-renders

B Only content re-renders

C Both sidebar and content re-render

D No re-render happens

💡 Hint

See step 6 in execution_table about sidebar interaction

Concept Snapshot

Parallel routes in Next.js let you render multiple UI parts at once using @slot.
Define slots in your layout by rendering the named props like {sidebar} and {content}.
Each slot renders its own child route component.
Slots render in parallel, then combine to form the full page.
Updating one slot doesn't re-render others, improving performance.

Full Transcript

Parallel routes with @slot in Next.js allow multiple parts of a page to render simultaneously. When a user visits a route, Next.js renders the main layout component which includes named slots. Each slot corresponds to a child route that renders its own component independently. These slots render in parallel and then combine to form the complete page UI. This means if the user interacts with one slot, only that slot updates without re-rendering the entire page. This approach improves performance and user experience by isolating UI parts. The execution table shows step-by-step how Next.js renders the main layout, fills each slot with its component, combines them, and handles updates.