Next.js - Parallel Routing

Quiz

Parallel Routing

Parallel Routing is a routing method, by which you can simultaneously and conditionally render one or more pages within the same layout. They are useful for dynamic sections of an app, such as dashboards and feeds on social sites.

Example Use Case

Imagine, you need to create a social media site, where the user can see their feed and their profile. The feed is displayed on the left side of the screen, and the profile is displayed on the right side of the screen. The following directory structure shows the parallel routing for the social media site.

app/
  layout.tsx
  page.tsx
  @sidebar/
      layout.tsx
      page.tsx
  @content/
      layout.tsx
      page.tsx

How to Setup Parallel Routing

To setup parallel routing, follow the steps below:

Step 1: Enable App Router

Parallel routing is only supported in Next.js App Router. So make sure that your Next.js project is using Next.js 13 or later with the App Router enabled. See how to enable App Router.

Step 2: Create Named Slots

The parallel routes are created using named slots. Slots are defined with the @folder convention. For example, the following file structure defines two slots, @sidebar and @content.

app/
  layout.tsx
  page.tsx
  @sidebar/
      layout.tsx
      page.tsx
  @content/
      layout.tsx
      page.tsx

Step 3: Define Layout File

Now, we need to define the root layout file. The root layout file is the layout that will be used for all the pages in the application. It is defined in the app/layout.tsx file.

// File: app/layout.tsx

export default function RootLayout({
        children, sidebar, content,
    }: {
        children: React.ReactNode;
        sidebar: React.ReactNode;
        content: React.ReactNode;
    }) {
    return (
      <html lang="en">
        <body>
          <div style={{ display: "flex" }}>
            <aside style={{ width: "20%", background: "#f4f4f4" }}>
              {sidebar} {/* Sidebar slot */}
            </aside>
            <main style={{ width: "80%" }}>
              {content} {/* Main Content slot */}
            </main>
          </div>
        </body>
      </html>
    );
}

Step 4: Create Parallel Route Segments

After setting up the root layout, we can start creating individual parallel route segments. Each parallel route segment is defined in a folder with the @folder convention.

// File: @sidebar/page.tsx

export default function Sidebar() {
  return <nav>Sidebar Content</nav>;
}

// File: @content/page.tsx

export default function Content() {
  return <section>Main Content</section>;
}

Step 5: Define the Default Page

Finally, we need to define the default home page. This is the page that will be rendered when the user visits the root URL of the application.

// File: app/page.tsx

export default function Home() {
    return <h1>Welcome to My Page</h1>;
}

Example of Parallel Routing

In the example below, we will create a parallel routing for a social media site. The site will have a sidebar for displaying the user's feed and a main content area for displaying the user's profile. The sidebar will be displayed on the left side of the screen, and the main content area will be displayed on the right side of the screen.

// File: @sidebar/page.tsx

export default function Sidebar() {
  return <nav>Sidebar Content</nav>;
}

// File: @content/page.tsx

export default function Content() {
  return <section>Main Content</section>;
}

// File: app/layout.tsx

export default function RootLayout({
    children,
    sidebar,
    content,
}: {
    children: React.ReactNode;
    sidebar: React.ReactNode;
    content: React.ReactNode;
}) {
    return (
        <html lang="en">
        <body>
            <div style={{ display: "flex" }}>
            <aside style={{ width: "20%", background: "#f4f4f4", padding: "10px" }}>
                {sidebar} {/* Sidebar slot */}
            </aside>
            <main style={{ width: "80%", fontWeight: "bold" }}>
                {content} {/* Main Content slot */}
            </main>
            </div>
        </body>
        </html>
    );
}

Output

In the output, we can see that the sidebar and main content are displayed side by side.

Print Page