Topic 10 of 39
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
tsx
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
Q:
What problem do Parallel Routes solve in Next.js?
A:
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.
example
tsx
// 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.