Parallel routes (@slot) in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

Parallel routes let you show different parts of the UI at the same time, like sidebars or modals, without replacing the main page content. The <code>@slot</code> syntax marks where these extra routes appear.

intermediate

How do you define a parallel route in Next.js app router?

You create a folder with the route name inside parentheses, like @sidebar, and inside it, add a page.tsx. Then in the main layout, use {@sidebar} to show it.

beginner

What does the @slot syntax do in Next.js layouts?

It tells Next.js where to render the content of a parallel route. It acts like a placeholder for that route's UI inside the main layout.

intermediate

Can parallel routes update independently without reloading the main page in Next.js?

Yes! Parallel routes let parts of the UI update separately, so you can change a sidebar or modal without reloading the whole page.

intermediate

Why might you use parallel routes instead of nested routes in Next.js?

Parallel routes let you show multiple UI sections side-by-side or overlayed, like a sidebar and main content, without forcing one inside the other. Nested routes replace or nest content, but parallel routes run alongside.

In Next.js, what does the @slot syntax specify?

A The data fetching method

B Where to render a parallel route's content

C The CSS class for styling

D The URL path of a route

@slot marks the placeholder in a layout where the parallel route's UI will appear.

How do you name a folder to create a parallel route in Next.js app router?

A With parentheses, like (sidebar)

B With square brackets, like [sidebar]

C With curly braces, like {sidebar}

D With angle brackets, like <sidebar>

Parallel route folders use parentheses to separate them from normal routes.

What happens if you omit @slot in a layout for a parallel route?

A The route renders twice

B The app crashes

C The route becomes the main route

D The parallel route content won't render in that layout

Without @slot, Next.js doesn't know where to show the parallel route's UI.

Which UI pattern is best suited for parallel routes in Next.js?

A Single full-page form

B Simple page navigation

C Sidebar or modal alongside main content

D Static content only

Parallel routes let you show multiple UI parts side-by-side or overlayed, like sidebars or modals.

Can parallel routes in Next.js update independently without reloading the whole page?

A Yes, they update separately

B No, they reload the entire page

C Only if using server components

D Only with client-side routing

Parallel routes allow independent UI updates without full page reloads.

Explain how parallel routes work in Next.js and the role of the @slot syntax.

Think about showing a sidebar and main content together.

Describe a real-life example where using parallel routes with @slot in Next.js improves user experience.

Imagine a shopping site with filters on the side.