All 5 Parallel Routes & Intercepting Routes questions
More in Parallel Routes & Intercepting Routes
How do you set up the folder structure for a parallel route slot in your application? What is an intercepting route, and what problem does it solve? How would you combine parallel routes and intercepting routes together to build a modal that overlays the current page? What are common use cases where parallel routes provide a better solution than simply rendering multiple components inside a single page?
Advertisement
Back to results for “Layouts”
Next.js › Parallel Routes & Intercepting Routes

What are parallel routes in the Next.js App Router, and why would you use them?

Beginner

Answer

Parallel routes let you render two or more independent pages within the same layout at the same time, using named slots defined with an at sign prefix, which is useful for building dashboards where different sections, like analytics and recent activity, load and update independently of each other.
// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, activity }) {
  return (
    <div>
      {children}
      {analytics}
      {activity}
    </div>
  );
}
Real-world example A dashboard shows an analytics chart and a recent activity feed side by side, with each one implemented as an independent parallel route that fetches and updates its own data separately.

Common follow-ups: How do you create the folder structure needed for a parallel route slot?;Can each parallel route slot have its own independent loading state?

Layouts & Templates;Loading UI & Streaming with Suspense
All 5 Parallel Routes & Intercepting Routes questions