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 add Skeleton Loading in NextJS ?
Skeleton Loading in Next.js provides a placeholder UI while content is loading, improving perceived performance and user experience. It visually represents loading elements, ensuring a smoother, more engaging application. ApproachTo add skeleton loading in nextjs application we are going to use the
2 min read
How to Set Port in NextJs?
Setting a custom port in Next.js is essential when you want to run your development or production server on a port other than the default (3000). While Next.js doesn't directly support port configuration via .env.local for development, you can control the port using alternative methods. This article
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 Open a Link in a New Tab in NextJS?
Opening a link in a new tab in Next.js consists of using either the target="_blank" attribute in an anchor (<a>) tag or using Next.js's Link component with the passHref prop to ensure proper handling of routing while opening the link in a new tab. In this article, we will explore both these ap
3 min read
How to Add Spinner Loader in Next.js ?
In web applications, providing a smooth and responsive user experience is very important. One way to achieve this is by adding a spinner loader to indicate that a process is ongoing, such as fetching data or loading a new page. In this article, we'll explore how to add a spinner loader in a Next.js
2 min read
How to Redirect in Next.js ?
NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about How to Redirect in NextJS with different
4 min read
How to add Popup in NextJS ?
In this article, we are going to learn how we can add Popup in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. Approach: To add our Popup in NextJs we are going to use the reactjs-popup package.
3 min read
How To Set Up Mongoose With Typescript In NextJS ?
Integrating Mongoose with TypeScript in a Next.js application allows you to harness the power of MongoDB while maintaining strong typing and modern JavaScript features. This guide will walk you through the process of setting up Mongoose with TypeScript in a Next.js project, ensuring your application
5 min read