Parallel Routes Dashboard
← Back to HomeThis dashboard demonstrates Next.js parallel routes. Each section below (@analytics and @team) is loaded independently and can have its own loading states, error boundaries, and navigation.
Dashboard Overview
This is the main dashboard page. The sections below are loaded using Next.js parallel routes, allowing them to be rendered independently.
Total Users
1,234
Active Sessions
567
Revenue
$12,345
Analytics
This section is loaded independently using the @analytics parallel route slot.
Page Views
8,547
+12.5%Bounce Rate
32.4%
-2.3%Avg. Duration
4.13m
+8.1%Team Activity
This section is loaded independently using the @team parallel route slot.
Alice Johnson
Team Lead
Bob Smith
Developer
Charlie Brown
Designer
Diana Prince
Product Manager
Active Now: 2 / 4
How Parallel Routes Work:
- Folders starting with @ (like @analytics, @team) define named slots
- Each slot can have its own loading.tsx, error.tsx, and not-found.tsx
- Slots are passed as props to the parent layout component
- default.tsx files provide fallback content for soft navigation
- Enables independent error handling and loading states
- Perfect for dashboards with multiple independent sections