Q12: What are Parallel Routes (@slot) in Next.js?
Parallel Routes render one or more pages simultaneously inside the same layout using named slots (@slot). They allow building complex dashboard interfaces, modals, and conditional split-screen layouts with independent error and loading states.
Parallel Route Slots in Layout
// Directory: app/dashboard/@analytics/page.js & app/dashboard/@team/page.js
// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
return (
<div>
{children}
<div className="grid-2-col">
{analytics} {/* Renders @analytics/page.js */}
{team} {/* Renders @team/page.js */}
</div>
</div>
);
}💡 @analytics and @team slots pass as props into DashboardLayout to render side-by-side.
Key Takeaways
- Folders prefixed with
@define slot props passed directly into the parent layout. - Allows independent loading states and routing for split-screen interfaces.
Knowledge Check
How are slot folders designated when implementing Parallel Routes in the App Router?