Parallel Routes: Dashboards and Conditional Slot Rendering
Parallel Routes allow developers to render one or more independent page slots (@slot) simultaneously within the same parent layout. Each slot can possess its own independent loading and error states, and can be rendered conditionally based on user role or session state without complex client-side conditional logic.
Learning Objectives
Define named slots using the @folder convention.
Compose multiple slots simultaneously inside layout.tsx props.
Implement independent Suspense loading states and error boundaries for each slot.
Conditionally render slots based on user authentication and permissions.
Prerequisites & Background Knowledge
Why Interviewers Care
Highly popular in interview rounds focused on complex dashboard systems, analytics portals, and split-screen interfaces.
The Challenge
Explain how Parallel Routes operate in Next.js App Router. Build a dashboard layout that renders an @analytics slot and a @team slot side by side, with role-based conditional rendering and default fallback states.
Code Architecture & Implementation
1// app/dashboard/layout.tsx2import { getSession } from '@/lib/auth/session';34interface DashboardLayoutProps {5 children: React.ReactNode;6 analytics: React.ReactNode; // Injected from app/dashboard/@analytics/page.tsx7 team: React.ReactNode; // Injected from app/dashboard/@team/page.tsx8}910export default async function DashboardLayout({11 children,12 analytics,13 team,14}: DashboardLayoutProps) {15 const session = await getSession();16 const isAdmin = session?.role === 'admin';1718 return (19 <div className="dashboard-shell p-6">20 {/* Main route content */}21 <div className="mb-6">{children}</div>2223 {/* Parallel independent slots */}24 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">25 <section className="bg-white p-4 rounded shadow border">26 <h2 className="text-lg font-bold mb-3">Live Metrics</h2>27 {analytics}28 </section>2930 {/* Conditional slot: Only admins see team management */}31 {isAdmin ? (32 <section className="bg-white p-4 rounded shadow border">33 <h2 className="text-lg font-bold mb-3">Team Administration</h2>34 {team}35 </section>36 ) : null}37 </div>38 </div>39 );40}
Architectural Explanation
In traditional React applications, a multi-pane dashboard requires an orchestration component with multiple nested states and combined loading spinners. In Next.js App Router, folders prefixed with @ define parallel route slots. Next.js passes each slot as a prop to the parent layout.tsx. Each slot maintains an isolated render lifecycle: @analytics/loading.tsx displays a skeleton for metrics while @team is already rendered and interactive. If an error occurs in @analytics/error.tsx, only that card shows an error boundary while the rest of the dashboard remains operational.
Common Mistakes & Anti-Patterns
Forgetting `default.tsx` in a slot, causing a 404 error during client-side navigation or hard page reloads.
Expecting slot names to show up in the browser URL (slots are purely layout composition props).
Nesting multiple layout levels without forwarding slot props.
Interview Follow-Up Traps
The interviewer asks: "What happens when you refresh the page on a sub-route inside a slot if default.tsx is missing?" Next.js will render a 404 because it cannot find the active state for the other slot.
Frequently Asked Questions
How do you close or clear a modal rendered in a slot?
Navigate back to the parent route or render `null` from `default.tsx`.
Can parallel routes be used for A/B testing?
Yes, layouts can conditionally render `@variantA` or `@variantB` based on user cookies or flags.