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.

Practice

1. What is the main purpose of using @slot in Next.js parallel routes?

easy

A. To display multiple UI parts simultaneously in different route segments

B. To fetch data from an API endpoint

C. To define server-side rendering behavior

D. To create dynamic API routes

Solution

1. Step 1: Understand the role of @slot

   @slot is used to show multiple UI parts at once by matching route segments.

2. Step 2: Identify the purpose in parallel routes

   It allows different UI sections to render in parallel, improving layout flexibility.

3. Final Answer:

   To display multiple UI parts simultaneously in different route segments -> Option A

4. Quick Check:

   Parallel routes use @slot to show multiple UI parts [OK]

Hint: Remember: @slot shows multiple UI parts at once [OK]

Common Mistakes:

• Confusing @slot with data fetching
• Thinking @slot controls API routes
• Assuming @slot is for server rendering only

2. Which of the following is the correct syntax to define a parallel route slot named sidebar in Next.js?

easy

A. export const @slot sidebar = () => <div>Sidebar</div>;

B. export const slot_sidebar = () => <div>Sidebar</div>;

C. export const sidebar = () => <div>Sidebar</div>;

D. export const SidebarSlot = () => <div>Sidebar</div>;

Solution

1. Step 1: Recall parallel route slot syntax

   Slots are exported as named exports matching the slot name, e.g., export const sidebar.

2. Step 2: Check each option

   export const sidebar = () => <div>Sidebar</div>; correctly exports a constant named sidebar as a React component.

3. Final Answer:

   export const sidebar = () => <div>Sidebar</div>; -> Option C

4. Quick Check:

   Slot name matches export const name [OK]

Hint: Export slot as named const matching slot name [OK]

Common Mistakes:

• Using @slot keyword in export
• Prefixing slot name incorrectly
• Using PascalCase instead of slot name

3. Given this Next.js parallel route layout code:

export const header = () => <header>Header</header>;
export const footer = () => <footer>Footer</footer>;

export default function Page() {
  return <main>Main Content</main>;
}

What will be rendered on the page?

medium

A. Only <main>Main Content</main> is rendered

B. <header>Header</header>, <main>Main Content</main>, and <footer>Footer</footer> are all rendered

C. Only <header>Header</header> and <footer>Footer</footer> are rendered

D. Syntax error due to missing @slot usage

Solution

1. Step 1: Understand parallel route slots rendering

   Slots like header and footer render alongside the default export component.

2. Step 2: Combine all parts

   The page renders header, main content, and footer together as parallel UI parts.

3. Final Answer:

   <header>Header</header>, <main>Main Content</main>, and <footer>Footer</footer> are all rendered -> Option B

4. Quick Check:

   Parallel routes render all slots plus default [OK]

Hint: Slots and default export render together [OK]

Common Mistakes:

• Thinking only default export renders
• Assuming slots need explicit @slot tags in JSX
• Confusing syntax error with missing @slot

4. You wrote this code for a parallel route slot:

export const sidebar = () => <div>Sidebar</div>;

export default function Page() {
  return <main>Main</main>;
}

But the sidebar does not appear on the page. What is the likely cause?

medium

A. The slot name sidebar does not match any route segment

B. You forgot to import React

C. The default export must be named sidebar

D. Parallel routes require class components, not functions

Solution

1. Step 1: Check slot name and route segment matching

   Slots render only if their name matches a parallel route segment in the folder structure.

2. Step 2: Identify mismatch issue

   If no route segment named sidebar exists, the slot won't render.

3. Final Answer:

   The slot name sidebar does not match any route segment -> Option A

4. Quick Check:

   Slot name must match route segment [OK]

Hint: Match slot name exactly to route segment folder [OK]

Common Mistakes:

• Assuming React import is required in Next.js 13+
• Thinking default export must be slot named
• Believing only class components work for slots

5. You want to create a layout with parallel routes showing a nav bar and a content area side by side. Which folder structure and code setup correctly implements this using @slot?

hard

A. Folders: app/(nav)/page.tsx and app/(content)/page.tsx with export const nav = () => <nav>Nav</nav>; in nav folder and export default function Page() { return <main>Content</main>; } in content folder

B. Folders: app/(nav)/page.tsx and app/(content)/page.tsx with export default function Nav() { return <nav>Nav</nav>; } and export default function Content() { return <main>Content</main>; }

C. Folders: app/nav/page.tsx and app/content/page.tsx with export default function Nav() { return <nav>Nav</nav>; } and export default function Content() { return <main>Content</main>; }

D. Folders: app/nav/page.tsx and app/content/page.tsx with export const nav = () => <nav>Nav</nav>; in nav folder and export default function Page() { return <main>Content</main>; } in content folder

Solution

1. Step 1: Understand parallel route folder naming

   Parallel routes use folder names without parentheses to define slots, e.g., nav and content.

2. Step 2: Match slot export and default export

   In nav folder, export export const nav for the slot; in content folder, export default the main content.

3. Step 3: Verify options

   Folders: app/nav/page.tsx and app/content/page.tsx with export const nav = () => <nav>Nav</nav>; in nav folder and export default function Page() { return <main>Content</main>; } in content folder correctly uses folders app/nav and app/content with proper exports.

4. Final Answer:

   Folders: app/nav/page.tsx and app/content/page.tsx with export const nav and default export in content -> Option D

5. Quick Check:

   Folder names match slot names without parentheses [OK]

Hint: Use folder names matching slot names without parentheses [OK]

Common Mistakes:

• Using parentheses in folder names for slots
• Exporting slots as default exports
• Mixing slot export and default export roles