Transform Your Next.js Experience: A Guide to Multiple Root Layouts in Next.js
Last Update: 15 Oct 2024
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: 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.
Trendingblogs
Get the best of our content straight to your inbox!
Don’t worry, we don’t spam!