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.
