How To Setup Multiple Layouts In NextJS?

How to add layout in Next.js ?

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;
  }
}

JavaScript

/**  src/components/Header.js  **/

const Header = () => {
  return (
    <div className="bg-black p-2 text-white text-3xl">
      Header Section
    </div>
  )
}

export default Header

JavaScript

/** src/components/Footer.js **/

const Footer = () => {
  return (
    <div className="text-sm text-center border-t-2">
      Footer Section
    </div>
  )
}

export default Footer

JavaScript

/** 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>    
  );
}

JavaScript

/** 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

JavaScript

/** 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>    
  );
}

JavaScript

/** 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

JavaScript

/**  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>
  );
}

JavaScript

/** 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/

Tags:

#Next.js #ReactJS #Web Technologies

How to add layout in Next.js ?

How To Setup Multiple Layouts In NextJS?

Prerequisites:

Approach

Steps to Create the Next Application And Installing Module

Project Structure:

Contact Us