hardFrontend

What are parallel routes (@slot) in Next.js and when would you use them?

Q: What are parallel routes (@slot) in Next.js and when would you use them?

**TL;DR.** **Parallel routes** use @folder "slots" to render **multiple pages in the same layout at once** (e.g. a feed and a sidebar), each with **independent** loading/error states and navigation. They're ideal for **dashboards, modals, and split views**. layout receives both slots as props @team own loading/error @analytics independent nav</te

783 views

Understand the problem

Rendering multiple independent pages in the same layout simultaneously.

nextjsparallel-routesroutingadvanced

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Layout consuming two slots

// app/dashboard/layout.tsx
export default function Layout({
  children, team, analytics,            // @team and @analytics slots
}: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) {
  return <><section>{team}</section><section>{analytics}</section>{children}</>;
}
// Folders: app/dashboard/@team/page.tsx, app/dashboard/@analytics/page.tsx

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is Partial Prerendering (PPR) in Next.js?

How do you handle authentication in Next.js?