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.