0
0
NextJSframework~5 mins

Parallel routes (@slot) in NextJS

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Parallel routes let you show different parts of a page at the same time. They help build complex layouts easily.

You want to show a sidebar and main content side by side.
You need to load multiple sections independently on the same page.
You want to keep some UI parts visible while changing others.
You want to reuse layout parts without repeating code.
Syntax
NextJS
export const metadata = { title: 'Layout Title' };

export default function Layout({ sidebar, content }) {
  return (
    <>
      {sidebar}
      {content}
    </>
  );
}

The @slot syntax defines where parallel routes render their content.

Each slot has a unique name to match the route segment.

Examples
This layout shows two slots: one for a menu and one for main content.
NextJS
export default function Layout({ menu, main }) {
  return (
    <>
      {menu}
      {main}
    </>
  );
}
Here, three slots let you show navigation, dashboard, and notifications side by side.
NextJS
export default function DashboardLayout({ nav, dashboard, notifications }) {
  return (
    <>
      {nav}
      {dashboard}
      {notifications}
    </>
  );
}
Sample Program

This example shows a root layout with two slots: sidebar and content. Each slot renders a different route segment side by side using flexbox.

NextJS
export default function RootLayout({ sidebar, content }) {
  return (
    <html lang="en">
      <body>
        <div style={{ display: 'flex', gap: '1rem' }}>
          {sidebar}
          {content}
        </div>
      </body>
    </html>
  );
}

// In app/(sidebar)/page.js
export default function Sidebar() {
  return <nav>Sidebar menu</nav>;
}

// In app/(content)/page.js
export default function Content() {
  return <main>Main content area</main>;
}
OutputSuccess
Important Notes

Slots must have unique names to avoid conflicts.

Parallel routes help keep UI parts independent and reusable.

Use CSS like flexbox to arrange slots visually side by side.

Summary

Parallel routes use @slot to show multiple UI parts at once.

Each slot matches a route segment with the same name.

This helps build flexible and reusable layouts easily.