Next.js › Parallel Routes & Intercepting Routes
What are parallel routes in the Next.js App Router, and why would you use them?
BeginnerAnswer
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.