Parallel routes concept in NextJS - Step-by-Step Execution

Concept Flow - Parallel routes concept

User navigates to URL

↓

Next.js Router checks routes

↓

Identify parallel routes in layout

↓

Render multiple route segments simultaneously

↓

Combine segments into final page

↓

Display combined UI to user

Next.js checks the URL, finds parallel routes, renders them at the same time, and combines them into one page.

Execution Sample

NextJS

export default function Page() {
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      <Sidebar />
      <Content />
    </div>
  )
}

This code illustrates the final combined UI from parallel routes in Next.js, rendering Sidebar and Content side by side.

Execution Table

Step	Action	Route Segment	Render Result	Combined UI
1	User navigates to /dashboard	N/A	N/A	N/A
2	Router identifies parallel routes	sidebar and content	Sidebar component rendered	Sidebar shown
3	Router renders content route	content	Content component rendered	Sidebar and Content shown
4	Combine sidebar and content	sidebar + content	Both rendered	Sidebar and Content shown side by side
5	Display final page	full page	Complete UI rendered	User sees combined layout

💡 All parallel routes rendered and combined, page fully displayed.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
sidebarRendered	false	true	true	true	true
contentRendered	false	false	true	true	true
combinedUI	empty	Sidebar only	Sidebar + Content	Sidebar + Content	Sidebar + Content

Key Moments - 2 Insights

Why do sidebar and content render separately but show together?

Because Next.js renders each parallel route segment independently (see steps 2 and 3), then combines them into one UI (step 4).

What happens if one parallel route fails to render?

The combined UI will miss that segment, so the page might look incomplete. Next.js tries to render all segments before showing the page (see step 4).

Visual Quiz - 3 Questions

Look at the execution table, at which step does the content route render?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Check the 'Route Segment' and 'Render Result' columns in step 3.

According to variable_tracker, when is sidebarRendered true?

A After Step 2

B After Step 1

C After Step 3

D After Step 5

💡 Hint

Look at the sidebarRendered row and its value after each step.

If the content route did not render, how would combinedUI look after Step 4?

A Content only

B Empty

C Sidebar only

D Sidebar and Content

💡 Hint

Refer to combinedUI values in variable_tracker after Step 4.

Concept Snapshot

Parallel routes let Next.js render multiple parts of a page at once.
Each route segment renders independently.
Segments combine into one UI before display.
Use parallel routes to build layouts with sidebars, modals, or tabs.
This improves user experience by loading parts simultaneously.

Full Transcript

In Next.js, parallel routes allow rendering multiple route segments at the same time. When a user navigates to a URL, the router identifies which parts of the page come from parallel routes. It renders each segment independently, like a sidebar and main content. Then, Next.js combines these segments into one complete page and shows it to the user. This approach helps build complex layouts that load faster and feel smoother. The execution table shows each step: navigation, rendering sidebar, rendering content, combining, and final display. Variables track which parts have rendered and how the UI builds up. Common confusions include why segments render separately but show together, and what happens if one segment fails. Visual quizzes help check understanding of when each segment renders and how the combined UI forms.