NextjsHow-ToIntermediate · 4 min read

How to Use Parallel Routes for Performance in Next.js

In Next.js, you use parallel routes by defining multiple route segments inside the app directory with unique segment keys in your layout files. This allows different parts of the UI to load independently and in parallel, improving performance by reducing wait times for nested content.

📐

Syntax

Parallel routes in Next.js are defined inside the app directory using special keys in the layout or page files. Each parallel route is a separate folder with a unique key inside parentheses, like (sidebar) or (modal). You then use the children prop to render these routes side-by-side.

Key parts:

Segment keys: Folder names in parentheses to identify parallel routes.
Layout files: Use layout.js to define UI structure and include parallel routes.
Children prop: Renders nested routes inside layouts.

javascript

app/layout.js

export default function RootLayout({ children, sidebar }) {
  return (
    <html lang="en">
      <body>
        <div style={{ display: 'flex' }}>
          <aside style={{ width: '250px' }}>{sidebar}</aside>
          <main style={{ flex: 1 }}>{children}</main>
        </div>
      </body>
    </html>
  )
}

app/(sidebar)/layout.js

export default function SidebarLayout({ children }) {
  return <nav>{children}</nav>
}

app/page.js

export default function MainPage() {
  return <h1>Main Content</h1>
}

app/(sidebar)/page.js

export default function SidebarPage() {
  return <p>Sidebar Content</p>
}

💻

Example

This example shows a Next.js app with two parallel routes: a main content area and a sidebar. The RootLayout renders both routes side-by-side using flexbox. The sidebar loads independently from the main content, so they can render in parallel, improving perceived speed.

javascript

app/layout.js

export default function RootLayout({ children, sidebar }) {
  return (
    <html lang="en">
      <body>
        <div style={{ display: 'flex', height: '100vh' }}>
          <aside style={{ width: '200px', backgroundColor: '#f0f0f0', padding: '1rem' }}>
            {sidebar}
          </aside>
          <main style={{ flex: 1, padding: '1rem' }}>
            {children}
          </main>
        </div>
      </body>
    </html>
  )
}

app/(sidebar)/layout.js

export default function SidebarLayout({ children }) {
  return <nav>{children}</nav>
}

app/page.js

export default function MainPage() {
  return <h1>Main Content Loaded</h1>
}

app/(sidebar)/page.js

export default function SidebarPage() {
  return <p>Sidebar Loaded</p>
}

Output

<html lang="en"> <body> <div style="display:flex;height:100vh"> <aside style="width:200px;background-color:#f0f0f0;padding:1rem"> <nav> <p>Sidebar Loaded</p> </nav> </aside> <main style="flex:1;padding:1rem"> <h1>Main Content Loaded</h1> </main> </div> </body> </html>

⚠️

Common Pitfalls

Missing parentheses in folder names: Parallel route folders must be wrapped in parentheses, e.g., (sidebar). Forgetting this disables parallel routing.
Not passing parallel route props: Layout components must accept and render props for parallel routes, like {sidebar}. Otherwise, the parallel route content won't show.
Incorrect folder structure: Parallel routes must be siblings inside the app directory, not nested inside each other.
Forgetting to export default: Each route file must export a default React component.

javascript

/* Wrong: folder named 'sidebar' without parentheses disables parallel routing */
app/sidebar/page.js

export default function SidebarPage() {
  return <p>Sidebar Content</p>
}

/* Right: folder named '(sidebar)' enables parallel routing */
app/(sidebar)/page.js

export default function SidebarPage() {
  return <p>Sidebar Content</p>
}

📊

Quick Reference

Use parentheses (name) for parallel route folder names.
Pass parallel route props in layouts to render them.
Parallel routes load UI parts simultaneously for better performance.
Keep parallel routes as siblings inside app directory.

✅

Key Takeaways

Parallel routes use folders with parentheses to load UI parts simultaneously in Next.js.

Layouts must accept and render parallel route props to display their content.

Proper folder structure and naming are essential for parallel routes to work.

Parallel routes improve performance by reducing waiting time for nested content.

Always export default React components in parallel route files.