javascript 47 lines · 8 steps

Parallel routes in a Next.js layout

A dashboard layout wires Next.js parallel-route slots alongside children, with a client component highlighting the active nav link.

Explained by highlit
Next.js Intermediate parallel-routes layouts app-router active-link client-components
1export default function DashboardLayout({ children, analytics, notifications }) {
2 return (
3 <div className="flex h-screen overflow-hidden">
4 <Sidebar />
5 <div className="flex flex-1 flex-col overflow-hidden">
6 <header className="flex items-center justify-between border-b px-6 py-4">
7 <h1 className="text-lg font-semibold">Workspace</h1>
8 <div className="w-96">{notifications}</div>
9 </header>
10 <main className="flex-1 overflow-y-auto p-6">
11 {children}
12 <section className="mt-8">{analytics}</section>
13 </main>
14 </div>
15 </div>
16 );
17}
18 
19function Sidebar() {
20 return (
21 <aside className="flex w-60 flex-col gap-1 border-r bg-neutral-50 p-4">
22 <NavLink href="/dashboard">Overview</NavLink>
23 <NavLink href="/dashboard/projects">Projects</NavLink>
24 <NavLink href="/dashboard/team">Team</NavLink>
25 <NavLink href="/dashboard/settings">Settings</NavLink>
26 </aside>
27 );
28}
29 
30'use client';
31import Link from 'next/link';
32import { usePathname } from 'next/navigation';
33 
34function NavLink({ href, children }) {
35 const pathname = usePathname();
36 const active = pathname === href;
37 return (
38 <Link
39 href={href}
40 className={`rounded-md px-3 py-2 text-sm ${
41 active ? 'bg-neutral-900 text-white' : 'text-neutral-700 hover:bg-neutral-200'
42 }`}
43 >
44 {children}
45 </Link>
46 );
47}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Named props on a layout map to Next.js parallel-route slots defined by @folder conventions.
  2. 2Splitting server layout shell from a 'use client' link keeps interactivity scoped to where it's needed.
  3. 3usePathname lets a component derive active state from the current URL without prop drilling.

Related explainers

javascript 
function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;
 

Building a recursive descent calculator

parsing recursion operator-precedence
Intermediate 8 steps
javascript 
import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks
Advanced 10 steps
javascript 
import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);

Delaying a loading spinner with a React hook

custom-hooks debouncing cleanup
Intermediate 8 steps
javascript 
const SWIPE_THRESHOLD = 80;
const MAX_TRANSLATE = 120;
 
export function attachSwipeToDismiss(element, onDismiss) {

Building a swipe-to-dismiss gesture in JS

touch-events gesture-detection dom-manipulation
Intermediate 10 steps
javascript 
const { pool } = require('./db');
 
function withTransaction() {
  return async (req, res, next) => {

A per-request transaction middleware in Express

middleware database-transactions connection-pooling
Advanced 7 steps
javascript 
function collapseConsecutiveLogs(lines, { keyFn = (l) => l.message } = {}) {
  const groups = [];
 
  for (const line of lines) {

Collapsing consecutive log lines in JavaScript

grouping run-length-encoding data-transformation
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Parallel routes in a Next.js layout — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code