What is Parallel routes concept in NextJS?

NextJSframework~5 mins

Parallel routes concept in NextJS

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Introduction

Parallel routes let you show different parts of a page at the same time without waiting for one to finish loading. This helps make your app faster and smoother.

You want to show a sidebar and main content that load separately.

You have a page with multiple sections that update independently.

You want to keep some UI parts visible while others change.

You want to improve user experience by loading parts in parallel.

You want to avoid full page reloads when switching views.

Syntax

NextJS

app/layout.js
app/(group1)/page.js
app/(group2)/page.js

// In your layout.js
export default function RootLayout({ children, group1, group2 }) {
  return (
    <html>
      <body>
        <div>
          <div>{group1}</div>
          <div>{group2}</div>
          {children}
        </div>
      </body>
    </html>
  )
}

// Use parallel routes by defining folders with parentheses
// and destructuring matching props in the parent layout

Parallel routes use folder names with parentheses to separate routes.

In the parent layout, destructure props matching the folder names and render them like {group1}.

Examples

This layout shows two parallel routes side by side: a sidebar and main content.

NextJS

// Folder structure example:
// app/layout.js
// app/(sidebar)/page.js
// app/(content)/page.js

// app/layout.js
export default function RootLayout({ sidebar, content }) {
  return (
    <html>
      <body>
        <div style={{ display: 'flex' }}>
          <aside style={{ width: '200px' }}>
            {sidebar}
          </aside>
          <main style={{ flex: 1 }}>
            {content}
          </main>
        </div>
      </body>
    </html>
  )
}

Each parallel route has its own page component that renders independently.

NextJS

// app/(sidebar)/page.js
export default function Sidebar() {
  return <nav>Menu items here</nav>
}

// app/(content)/page.js
export default function Content() {
  return <article>Main content here</article>
}

Sample Program

This example shows a page with a sidebar and main content loaded in parallel routes. The sidebar has navigation links, and the content area has a heading and paragraph. They appear side by side.

NextJS

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

// app/(sidebar)/page.js
export default function Sidebar() {
  return (
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  );
}

// app/(content)/page.js
export default function Content() {
  return (
    <article>
      <h1>Welcome to the content area</h1>
      <p>This section loads separately from the sidebar.</p>
    </article>
  );
}

OutputSuccess

Important Notes

Parallel routes improve user experience by loading parts of the page independently.

Use meaningful names for your parallel route folders inside parentheses.

Remember to add aria-label for accessibility on navigation elements.

Summary

Parallel routes let you show multiple parts of a page at once.

Use folder names with parentheses and destructure matching props in the layout to place them.

This helps make your app faster and easier to navigate.