Parallel routes concept in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are parallel routes in Next.js?

Parallel routes allow you to render multiple UI sections independently within the same page layout. They enable showing different content side-by-side or in different parts of the page without interfering with each other.

intermediate

How do you define parallel routes in Next.js App Router?

You define parallel routes by creating folders prefixed with the '@' symbol (e.g., `@sidebar`), colocated with the default route in the folder structure. This tells Next.js to render these routes in parallel slots.

intermediate

Why use parallel routes instead of nested routes?

Parallel routes let you show multiple independent UI parts at once, like a sidebar and main content, without nesting them inside each other. Nested routes replace content inside a single slot, but parallel routes show multiple slots simultaneously.

advanced

How do you render parallel routes in the layout?

In the parent layout.tsx, you render parallel route content using special slot components named after the '@' folders, e.g., `{children}` for the default slot and `{sidebar}` to show the `@sidebar` route's content.

advanced

Can parallel routes share state or data between them?

Parallel routes are independent, so they don't share state directly. To share data, you can use React context or global state management outside the routes.

What symbol is used to name parallel route segments in Next.js folder structure?

A $

B #

C !

D @

Next.js uses the '@' symbol to prefix folder names for parallel route segments, like `@sidebar`.

Which of these best describes parallel routes?

A Routes that render multiple UI parts independently at the same time

B Routes nested inside each other replacing content

C Routes that load pages sequentially

D Routes that only work on the server

Parallel routes let you show multiple UI sections side-by-side or independently within the same page.

How do you render content for a parallel route in the layout?

A Using multiple named slot components like {@sidebar}

B Using a single <Outlet> component

C Using <Link> components

D Using getServerSideProps

Each parallel route renders into its own named slot component (e.g., {@sidebar}) in the layout.

Can parallel routes share React state directly?

A Only if they are nested

B Yes, they share state automatically

C No, they are independent and need context or global state to share data

D Only on the server

Parallel routes are independent; sharing state requires React context or global state management.

What is a common use case for parallel routes?

A Styling components

B Showing a sidebar and main content simultaneously

C Loading data on the server

D Redirecting to another page

Parallel routes are great for layouts with multiple independent sections like sidebars and main content.

Explain how parallel routes work in Next.js and why they are useful.

Think about showing different parts of a page side-by-side.

Describe how to set up and render parallel routes in a Next.js app layout.

Focus on folder structure and layout components.

Practice

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

easy

A. To disable navigation between pages

B. To load pages sequentially one after another

C. To replace client-side routing with server-side only

D. To display multiple parts of a page simultaneously

Solution

1. Step 1: Understand what parallel routes do

   Parallel routes allow showing multiple UI sections at the same time on a page.

2. Step 2: Compare options with this understanding

   Only To display multiple parts of a page simultaneously correctly describes this purpose; others describe unrelated behaviors.

3. Final Answer:

   To display multiple parts of a page simultaneously -> Option D

4. Quick Check:

   Parallel routes = show multiple parts [OK]

Hint: Parallel routes show multiple page parts at once [OK]

Common Mistakes:

• Thinking parallel routes load pages one after another
• Confusing parallel routes with disabling navigation
• Assuming parallel routes replace client-side routing

2. Which folder naming pattern is used to define a parallel route in Next.js?

easy

A. Using parentheses like (route)

B. Using square brackets like [route]

C. Using curly braces like {route}

D. Using angle brackets like <route>

Solution

1. Step 1: Recall folder naming for parallel routes

   Next.js uses parentheses around folder names to mark parallel routes.

2. Step 2: Match options to this rule

   Only Using parentheses like (route) uses parentheses, which is correct for parallel routes.

3. Final Answer:

   Using parentheses like (route) -> Option A

4. Quick Check:

   Parallel routes folder = parentheses [OK]

Hint: Parallel routes folders use parentheses ( ) [OK]

Common Mistakes:

• Using square brackets which are for dynamic routes
• Confusing with curly braces or angle brackets
• Not using any special characters for parallel routes

3. Given this folder structure in Next.js:

app/
  (sidebar)/
    page.jsx
  (content)/
    page.jsx
  layout.jsx

What will happen when the app renders layout.jsx with parallel routes?

medium

A. Both sidebar and content pages render side by side inside layout

B. Only the sidebar page renders, content is ignored

C. Only the content page renders, sidebar is ignored

D. Neither sidebar nor content pages render automatically

Solution

1. Step 1: Understand parallel routes folder names

   Folders named with parentheses define parallel routes that render simultaneously.

2. Step 2: Apply to given structure

   Both (sidebar) and (content) are parallel routes, so their pages render side by side inside layout.

3. Final Answer:

   Both sidebar and content pages render side by side inside layout -> Option A

4. Quick Check:

   Parallel routes render all named folders simultaneously [OK]

Hint: Parentheses folders render together inside layout [OK]

Common Mistakes:

• Thinking only one parallel route renders at a time
• Assuming parallel routes need manual import to render
• Confusing parallel routes with nested routes

4. You have this code in your layout.jsx to render parallel routes:

import { Slot } from 'next/navigation';

export default function Layout() {
  return (
    

      <Slot name="sidebar" />
      <Slot name="content" />
    
  );
}

Why does this code cause an error?

medium

A. Because Slot must be imported from 'next/navigation' as a named import

B. Because <Slot /> should be self-closing JSX tags, not string literals

C. Because parallel routes cannot use Slot components

D. Because Slot requires a default export, not named

Solution

1. Step 1: Check JSX syntax in return statement

   The code uses <Slot name="sidebar" /> as a string literal, not as JSX tags.

2. Step 2: Correct JSX usage

   It should be <Slot name="sidebar" /> without quotes, as a self-closing JSX component.

3. Final Answer:

   Because <Slot /> should be self-closing JSX tags, not string literals -> Option B

4. Quick Check:

   JSX tags must not be strings [OK]

Hint: Use JSX tags, not strings, for [OK]

Common Mistakes:

• Writing JSX tags as strings inside return
• Importing Slot incorrectly
• Thinking Slot can't be used in parallel routes

5. You want to create a page with a sidebar and main content using parallel routes. Which folder structure and code snippet correctly implements this in Next.js?

app/
  (sidebar)/
    page.jsx
  (main)/
    page.jsx
  layout.jsx

And in layout.jsx:

export default function Layout() {
  return (
    

      {/* What goes here? */}
    
  );
}

hard

A. <Slot />

B. <Slot name="content" />
<Slot name="sidebar" />

C. <Slot name="sidebar" />
<Slot name="main" />

D. <Outlet name="sidebar" />
<Outlet name="main" />

Solution

1. Step 1: Match folder names to Slot names

   Folders are named (sidebar) and (main), so Slots must use these exact names.

2. Step 2: Check code snippet for correct Slot usage

   <Slot name="sidebar" /> <Slot name="main" /> uses <Slot name="sidebar" /> and <Slot name="main" />, matching folder names and correct JSX syntax.

3. Final Answer:

   <Slot name="sidebar" /> <Slot name="main" /> -> Option C

4. Quick Check:

   Slot names = folder names [OK]

Hint: Slot names must match parallel route folder names [OK]

Common Mistakes:

• Using wrong Slot names that don't match folders
• Using instead of
• Using only one Slot for multiple parallel routes