Transform Your Next.js Experience: A Guide to Multiple Root Layouts in Next.js

Learn the essential skills and steps to become a full stack developer. Start your journey today with this comprehensive guide for beginners!

Last Update: 15 Oct 2024

Transform Your Next.js Experience: A Guide to Multiple Root Layouts in Next.js image

Introduction

When building complex applications in Next.js, it's common to have different layouts for different sections of your app. With the introduction of the new App Router in Next.js 14, creating and managing multiple root layouts has become more flexible and intuitive. This guide will show you how to set up multiple root layouts in your Next.js application using the App Router.

What is a Root Layout?

A root layout in Next.js is a special layout that wraps around your page components, providing consistent UI elements like headers, footers, sidebars, or other shared elements. The App Router makes it easy to define these layouts in a file-based structure, ensuring that your layout logic is organized and easy to manage

Implementation of Multiple Root Layout

Step 1: Setting Up the Project

If you haven't already set up a Next.js project, you can do so by running the following command:

npx create-next-app@latest my-next-app
cd my-next-app

This will create a new Next.js project with the default configuration.

Step 2: Understanding the App Router Structure

Next.js 13 introduces the app/ directory as the new standard for building applications. In this directory, each route can have its own layout. You can create a folder structure to manage multiple root layouts based on the routes.

Here's an example of a typical structure when using the App Router with multiple layouts:

Fig: Folder Structure

dashboard/layout.js – Layout specific to the dashboard section.
auth/layout.js – Layout specific to the authentication section.
layout.js – The global root layout that wraps all other layouts.

Step 3: Creating Global Layout

The global root layout file provides a base layout that wraps around all pages in the application. To create this file, navigate to the app directory and add a layout.js file with the following code:

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <h1>Global Header</h1>
        </header>
        {children}
        <footer>
          <p>Global Footer</p>
        </footer>
      </body>
    </html>
  );
}

This layout will be used across your entire application unless overridden by a specific layout in a sub-directory.

Step 4: Creating a Specific Layout for the Dashboard

Now, let's create a specific layout for the dashboard section of your app. Inside the app/dashboard/ directory, create a layout.js file with the following content:

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div>
      <aside>
        <nav>
          <ul>
            <li>Dashboard Link 1</li>
            <li>Dashboard Link 2</li>
          </ul>
        </nav>
      </aside>
      <main>{children}</main>
    </div>
  );
}

This DashboardLayout will wrap any page under the /dashboard route, providing a specific layout for the dashboard section of your application.

Step 5: Creating a Layout for Authentication

Similarly, you might want a different layout for your authentication pages (login, signup). Create a layout.js file under the app/auth/ directory:

// app/auth/layout.js
export default function AuthLayout({ children }) {
  return (
    <div className="auth-layout">
      <header>
        <h2>Authentication Header</h2>
      </header>
      <main>{children}</main>
      <footer>
        <p>Auth Footer</p>
      </footer>
    </div>
  );
}

This layout will be used specifically for pages under the /auth route.

Step 6: Adding Page Components

Now that you've defined your layouts, you can create page components that will use these layouts automatically. For example, create a page.js file for the dashboard and authentication routes:

// app/dashboard/page.js
export default function DashboardPage() {
  return <h2>Welcome to the Dashboard</h2>;
}

// app/auth/page.js
export default function AuthPage() {
  return <h2>Login or Signup</h2>;
}

These pages will automatically use their respective layouts (DashboardLayout and AuthLayout) defined in their folders.

Testing the Layouts

Now, when you navigate to the /dashboard and /auth routes in your application, you will see that each section has its unique layout applied, while the global layout remains present for other pages, ensuring a consistent user experience. Below are screenshots of the output for both routes.

Fig: Dashboard Route

Fig: Auth Route

Conclusion

Using multiple root layouts in Next.js with the App Router is a powerful way to structure your application. It allows you to create distinct sections of your app, each with its own design and structure, while still maintaining a global layout. This approach makes your codebase more modular, easier to manage, and more scalable as your app grows.

Frequently Asked Questions

Root layouts in Next.js provide a consistent structure for your application, allowing you to define shared UI elements (like headers and footers) that wrap around your page components. This is particularly useful for maintaining a cohesive look across different sections of your app.

By Mediusware Editorial Team

Content Team at Mediusware

Hey, I'm a Content Writer with a passion for tech, strategy, and clean storytelling. I turn AI and app development into content that resonates and drives real results. When I'm not writing, you'll find me exploring the latest SEO tools, researching, or traveling.