How To Setup Multiple Layouts In NextJS?
Last Updated :
21 May, 2024
Next JS Layout components are commonly used to structure the overall layout of a website or web application. They provide a convenient way to maintain consistent header, footer, and other navigation elements across multiple pages In this article, we will learn to set up Multiple Layouts in NextJS. These are one of the most powerful features of Next.js which shows its ability to use multiple layouts to create reusable templates for your application.
Prerequisites:
Approach
- Organize components such as Header and Footer separately to facilitate easy integration into different layouts.
- Create layout components for each page category (e.g., home, sales, login) to encapsulate common layout structures and functionalities.
- Utilize metadata objects within layout components to define page-specific metadata such as title and description for better user experience.
- Implement dynamic page routing in Next.js to associate specific layout components with corresponding pages based on their category.
- Ensure reusability of layout components by designing them to accept children components dynamically, enabling flexible composition within different page layouts.
- Incorporate global styling, such as CSS or CSS-in-JS, at the layout level to maintain consistency across pages while allowing individual components to have their own styles.
Steps to Create the Next Application And Installing Module
Step 1: Create a Next Application using the following command:
npx create-next-app multiple-layout-nextapp
On pressing Enter, the below prompt will appear to configure your next app
Step 2: After creating your project folder i.e. multiple-layout-nextapp, move to it using the following command:
cd multiple-layout-nextapp
Project Structure:
The updated dependencies in package.json file will look like.
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.3"
},Example: Implemenattion to setup Multiple Layouts In NextJS.
CSS
/* src/app/global.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
/** src/components/Header.js **/
const Header = () => {
return (
<div className="bg-black p-2 text-white text-3xl">
Header Section
</div>
)
}
export default Header
/** src/components/Footer.js **/
const Footer = () => {
return (
<div className="text-sm text-center border-t-2">
Footer Section
</div>
)
}
export default Footer
/** src/app/(sales)/layout.js **/
import "../globals.css";
export const metadata = {
title: "Products Page",
description: "This is our Product Page",
};
export default function RootLayout({ children }) {
return(
<html lang="en">
<body>
<div className="w-full flex flex-col">
{children}
</div>;
</body>
</html>
);
}
/** src/app/(sales)/products/page.js **/
import Link from "next/link";
const page = () => {
return (
<div className="p-4">
<h2 className="text-2xl">
Welcome To our Products Page
</h2>
<br/>
<Link className="underline" href="/">
Go back to Home Page ...
</Link>
</div>
);
}
export default page
/** src/app/(login)/layout.js **/
import "../globals.css";
export const metadata = {
title: "Accounts Page",
description: "This is our Account Page",
};
export default function RootLayout({ children }) {
return(
<html lang="en">
<body>
<div className="w-full flex flex-col">
{children}
</div>;
</body>
</html>
);
}
/** src/app/(login)/account/page.js **/
import Link from "next/link";
const page = () => {
return (
<div className="p-4">
<h2 className="text-2xl">
Welcome To our Login Account Page
</h2>
<br/>
<Link className="underline" href="/">
Go back to Home Page ...
</Link>
</div>
);
}
export default page
/** src/app/(home)/layout.js **/
import "../globals.css";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export const metadata = {
title: "Home Page",
description: "This is the main Home Page",
};
export default function RootLayout({ children }) {
return (
<html>
<body>
<main className="w-full flex flex-col">
<Header />
{ children }
<Footer />
</main>
</body>
</html>
);
}
/** src/app/(home)page.js **/
import Link from "next/link";
export default function Home() {
return (
<div className="p-4">
<h2 className="text-2xl">
This is our main Home Page
</h2>
<br/>
<Link className="underline" href="/products">
Go to Products Page ...
</Link><br/>
<Link className="underline" href="/account">
Go to Account Page ...
</Link>
</div>
);
}
Step to Run Application: Run the application using the following command from the root directory of the project
npm run dev
Output: Your project will be shown in the URL http://localhost:3000/
Similar Reads
How to add layout in Next.js ? Next.js is a React-based full-stack framework developed by vercel that enables functionalities like pre-rendering of web pages. Unlike traditional react app where the entire app is loaded on the client, Next.js allow the web page to be rendered on the server, which is great for performance and SEO.
3 min read
How To Setup Multiple Themes In NextJS With React-Bootstrap? Multiple themes mean providing users with different visual styles or color schemes for an application, enhancing user experience and personalization. In this article, we'll explore how to set up multiple themes in a Next.js application using React-Bootstrap. We'll explore through creating a theme co
3 min read
How To Implement Multiple Classnames In NextJS ? When styling components in Next.js, it's common to encounter scenarios where you need to apply multiple classnames for different styling purposes. To implement multiple classnames in Next.js, you can utilize either the built-in classnames package or any other utility library like clsx. We will discu
4 min read
How to Add Stylesheet in Next.js ? In Next.js, adding a stylesheet enhances your app's styling capabilities. Import CSS files directly in your components or pages using ES6 import syntax. Next.js optimizes and includes these styles in the build process, ensuring efficient and modular CSS management.In this post, we are going to learn
4 min read
How to import SASS in Next.js ? Sass is the short form of Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. Importing SASS in Next.js allows you to use SCSS for styling your application. This integration enables advanc
2 min read
How to import image in Next.js ? Next.js is a full-stack React-based framework. Unlike a traditional react app, which loads and renders the entire application on the client, Next.js allows the first-page load to be rendered by the server, which is great for SEO and performance. Some of the key features of Next.js are:Â Server-side
4 min read