Next.js
/Advanced
Parallel Routes
Definition
Simultaneously rendering multiple pages within the same layout, created by using the `@folder` syntax (named slots).
Explain Like I'm New
A standard layout only has one `{children}` slot. Parallel routes allow you to have multiple slots. Imagine a complex dashboard where the 'Analytics' panel and the 'Team Chat' panel are totally different pages, fetching their own data, loading independently, but displayed side-by-side on the exact same screen.
Real World Example
A split-view UI where the left side of the screen is an `@analytics` route and the right side is an `@activity` route. If `@analytics` takes 5 seconds to load, it shows a spinner, but `@activity` loads instantly.
Common Use Cases
- •Complex dashboards
- •Split-screen UIs
- •Independent loading states
Interactive Example
Interview Questions
basic
- What character is used to define a parallel route slot?
intermediate
- How do you access a parallel route inside the `layout.tsx` file?