0 day streak
javascript / intermediate
Snippet

Parallel Routes for Multi-Slot Dashboards

Parallel Routes allow you to simultaneously render multiple pages in the same layout using '@slots'. This is ideal for dashboards where different sections (like analytics or team settings) need independent navigation or loading states.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default function Layout({
children,
analytics,
team
}) {
return (
<div className="dashboard">
<header>Dashboard</header>
<main>{children}</main>
<section className="slots">
<aside>{analytics}</aside>
<aside>{team}</aside>
</section>
</div>
);
}
nextjs
Breakdown
1
analytics, team
These are 'slots' defined by folders named @analytics and @team in the file system.
2
children
The implicit slot for the main page content.