Parallel Routes
Overview
Parallel Routes allow you to simultaneously or conditionally render one or more pages in the same layout. They are defined using named slots with an @ symbol (e.g., @modal). This is perfect for complex dashboards, modals, or split views.
Syntax
app/
├── layout.tsx
├── @analytics/
│ └── page.tsx # Slot rendered in layout
├── @team/
│ └── page.tsx # Slot rendered in layout
└── page.tsx # Main children prop
// app/layout.tsx
export default function Layout({ children, analytics, team }) {
return (
<div>
{children}
{analytics}
{team}
</div>
);
}Common Pitfalls
Forgetting to provide a
default.tsxfile. If Next.js cannot track the state of a slot upon hard navigation, it looks fordefault.tsx. If missing, it throws a 404.Confusing parallel routes (
@folder) with route groups ((folder)).
Interview Questions
What problem do Parallel Routes solve in Next.js?
They allow you to render multiple independent pages/views within the same layout simultaneously, each with their own error and loading states. This is ideal for dashboards or advanced modal routing.
Real-World Example
Implementing an intercepting route modal alongside a main page.
// This setup allows displaying a login modal over the current page
app/
├── layout.tsx
├── page.tsx
└── @modal/
├── default.tsx // Returns null (modal hidden by default)
└── login/
└── page.tsx // Renders the modal componentCheck Your Knowledge
Test your understanding of Parallel Routes with these quick questions.