Parallel Routes in Next.js 15 provide a powerful pattern for rendering multiple pages simultaneously within the same layout, enabling sophisticated split-view interfaces and conditional rendering scenarios. This feature leverages the App Router's slot-based architecture to compose complex UIs without client-side state management overhead.
Understanding Parallel Routes Architecture
Parallel Routes use a special folder naming convention with the @ prefix to define named slots. Each slot acts as an independent route segment that can render different content simultaneously. The parent layout receives these slots as props, allowing precise control over their composition and positioning.
The file structure looks like this:
1app/
2├── @analytics/
3│ ├── page.tsx
4│ └── loading.tsx
5├── @team/
6│ ├── page.tsx
7│ └── error.tsx
8├── layout.tsx
9└── page.tsxIn this structure, @analytics and @team are parallel route slots. The parent layout.tsx receives them as props and can render them independently:
1// app/layout.tsx
2export default function Layout({
3 children,
4 analytics,
5 team,
6}: {
7 children: React.ReactNode;
8 analytics: React.ReactNode;
9 team: React.ReactNode;
10}) {
11 return (
12 <div className="grid grid-cols-3 gap-4">
13 <div className="col-span-2">{children}</div>
14 <aside className="space-y-4">
15 {analytics}
16 {team}
17 </aside>
18 </div>
19 );
20}Each slot maintains its own loading and error states, providing granular control over the user experience. When navigation occurs, Next.js determines which slots need to update based on the route match, leaving others unchanged.
Building a Dashboard with Split Views
Consider a dashboard application that displays a main content area alongside real-time metrics and notifications. Parallel Routes enable this pattern without complex state synchronization.
1// app/dashboard/layout.tsx
2export default function DashboardLayout({
3 children,
4 metrics,
5 notifications,
6}: {
7 children: React.ReactNode;
8 metrics: React.ReactNode;
9 notifications: React.ReactNode;
10}) {
11 return (
12 <div className="min-h-screen bg-gray-50">
13 <div className="container mx-auto px-4 py-8">
14 <div className="grid grid-cols-12 gap-6">
15 {/* Main content area */}
16 <main className="col-span-8 bg-white rounded-lg shadow p-6">
17 {children}
18 </main>
19
20 {/* Side panels */}
21 <aside className="col-span-4 space-y-6">
22 <div className="bg-white rounded-lg shadow p-6">
23 {metrics}
24 </div>
25 <div className="bg-white rounded-lg shadow p-6">
26 {notifications}
27 </div>
28 </aside>
29 </div>
30 </div>
31 </div>
32 );
33}Each slot can then implement its own data fetching and rendering logic:
1// app/dashboard/@metrics/page.tsx
2async function getMetrics() {
3 const res = await fetch('https://api.example.com/metrics', {
4 next: { revalidate: 30 } // Revalidate every 30 seconds
5 });
6 return res.json();
7}
8
9export default async function MetricsSlot() {
10 const metrics = await getMetrics();
11
12 return (
13 <div>
14 <h2 className="text-lg font-semibold mb-4">Real-time Metrics</h2>
15 <div className="space-y-3">
16 <div className="flex justify-between">
17 <span className="text-gray-600">Active Users</span>
18 <span className="font-bold">{metrics.activeUsers}</span>
19 </div>
20 <div className="flex justify-between">
21 <span className="text-gray-600">Response Time</span>
22 <span className="font-bold">{metrics.responseTime}ms</span>
23 </div>
24 <div className="flex justify-between">
25 <span className="text-gray-600">Error Rate</span>
26 <span className="font-bold text-red-600">{metrics.errorRate}%</span>
27 </div>
28 </div>
29 </div>
30 );
31}This separation means the metrics panel can refresh independently without affecting the main content or notifications panel. Each slot's loading state renders separately, preventing the entire page from showing a loading spinner when only one section updates.
Handling Unmatched Routes with Default Fallbacks
Parallel Routes introduce a challenge: what happens when a slot doesn't have a matching route segment? Next.js solves this with default.tsx files that serve as fallback content.
Advertisement
1// app/dashboard/@metrics/default.tsx
2export default function DefaultMetrics() {
3 return (
4 <div className="text-gray-500 text-sm">
5 <p>Metrics unavailable for this view</p>
6 </div>
7 );
8}Without a default file, Next.js returns a 404 for the unmatched slot, which often isn't the desired behavior. The default file ensures graceful degradation when navigating to routes that don't have corresponding slot content.
This becomes particularly important with nested routing. Consider a dashboard with different views:
1app/dashboard/
2├── @metrics/
3│ ├── overview/
4│ │ └── page.tsx
5│ ├── detailed/
6│ │ └── page.tsx
7│ └── default.tsx
8├── overview/
9│ └── page.tsx
10├── detailed/
11│ └── page.tsx
12└── layout.tsxWhen navigating to /dashboard/overview, the @metrics/overview/page.tsx renders. But navigating to /dashboard/settings (which doesn't have a metrics slot) will use @metrics/default.tsx instead of breaking the layout.
Conditional Rendering with Intercepting Routes
Parallel Routes combine powerfully with Intercepting Routes to create modal-like experiences. This pattern allows displaying content in a slot while maintaining the URL structure for deep linking.
1// app/dashboard/layout.tsx
2export default function DashboardLayout({
3 children,
4 modal,
5}: {
6 children: React.ReactNode;
7 modal: React.ReactNode;
8}) {
9 return (
10 <>
11 {children}
12 {modal}
13 </>
14 );
15}1// app/dashboard/@modal/(.)settings/page.tsx
2'use client';
3
4import { useRouter } from 'next/navigation';
5
6export default function SettingsModal() {
7 const router = useRouter();
8
9 return (
10 <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
11 <div className="bg-white rounded-lg p-6 max-w-md w-full">
12 <div className="flex justify-between items-center mb-4">
13 <h2 className="text-xl font-bold">Settings</h2>
14 <button
15 onClick={() => router.back()}
16 className="text-gray-500 hover:text-gray-700"
17 >
18 ✕
19 </button>
20 </div>
21 <form className="space-y-4">
22 <div>
23 <label className="block text-sm font-medium mb-1">
24 Display Name
25 </label>
26 <input
27 type="text"
28 className="w-full border rounded px-3 py-2"
29 />
30 </div>
31 <button
32 type="submit"
33 className="w-full bg-blue-600 text-white rounded py-2"
34 >
35 Save Changes
36 </button>
37 </form>
38 </div>
39 </div>
40 );
41}The (.) prefix intercepts the route when navigating from within the dashboard. Clicking a settings link opens the modal overlay while updating the URL to /dashboard/settings. Refreshing the page or accessing the URL directly bypasses the interception and renders the full settings page.
Performance Considerations and Trade-offs
Parallel Routes introduce server-side complexity that requires careful consideration. Each slot performs independent data fetching, which can increase initial page load time if not optimized properly. The framework doesn't automatically deduplicate requests across slots, so multiple slots fetching similar data will make redundant network calls.
Streaming provides a solution for this. Each slot can stream its content independently, allowing the page to become interactive before all slots finish loading:
1// app/dashboard/@notifications/page.tsx
2import { Suspense } from 'react';
3
4async function NotificationsList() {
5 const notifications = await fetch('https://api.example.com/notifications');
6 const data = await notifications.json();
7
8 return (
9 <ul className="space-y-2">
10 {data.map((notification) => (
11 <li key={notification.id} className="text-sm">
12 {notification.message}
13 </li>
14 ))}
15 </ul>
16 );
17}
18
19export default function NotificationsSlot() {
20 return (
21 <div>
22 <h2 className="text-lg font-semibold mb-4">Notifications</h2>
23 <Suspense fallback={<div className="animate-pulse">Loading...</div>}>
24 <NotificationsList />
25 </Suspense>
26 </div>
27 );
28}The main trade-off centers on complexity versus flexibility. Parallel Routes add architectural overhead that may not be justified for simpler layouts. Teams often find that client-side state management or simple component composition suffices for basic split views. The pattern shines when slots need independent routing, loading states, or error handling—scenarios common in complex dashboards, admin panels, or multi-pane applications.
Another consideration involves caching behavior. Each slot's cache strategy operates independently, which provides fine-grained control but requires explicit configuration to maintain consistency across related data. Developers need to coordinate revalidation strategies when slots display interdependent information.
The pattern works best for applications with clear separation of concerns where each view area has distinct data requirements and user interactions. E-commerce product pages with separate review and recommendation panels, analytics dashboards with multiple data sources, or project management tools with concurrent task and timeline views all benefit from this architecture.
