Next JS Layout Component

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 navigation elements across multiple pages. Let’s see how you can create and use a Layout component in Next.js.

Prerequisites:

layout.js File in Next.js

The app created using App Router has layout.js and page.js inside of the app directory along with the other files.
Each directory inside of the app directory acts as a route and it becomes publically accessible if it contains page.js.
The layout of the page.js is represented through layout.js of the particular directory. The layout is the children’s UI of the page and it maintains its state, remains interactive, and does not re-render on navigation.
The layout.js contains the component that accepts children’s props that are populated through the child page.
Root Layout is the top-most layout and it contains HTML and body tags. It wraps the child layout using children’s props.
Layout is server componentProject and can fetch datacomponent.

Steps to Create the Project:

Step 1: To create your app, run the following npx command in your terminal to start the creation process:

 npx create-next-app@latest Demo-App

Step 2: Provide the necessary details to create your app as shown in the image below.

Steps to Create the project

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
}

Example: Illustration of the Root Layout.

Javascript

//layout.js
 
import { Advent_Pro } from "next/font/google";

import "./globals.css";
 
const inter = Advent_Pro({ subsets: ["latin"], weight: '700' });
 
export const metadata = {

    title: "Create Next App",

    description: "Generated by create next app",
};
 
export default function RootLayout({ children }) {

    return (

        <html lang="en">

            <body className={inter.className}>{children}</body>

        </html>

    );
}

Javascript

//page.js
 
import styles from "./page.module.css";
 
export default function Home() {

return (
<main className={styles.main}>

    <h1>React Tutorial</h1>

    <p>

        React is one of the most popular, efficient,

        and powerful open-source JavaScript library for

        building dynamic and interactive user interfaces.

        Whether you are a beginner or an experienced

        developer, React Tutorial will significantly enhance 

        your development skills. React JS is not a

        framework, it is just a library developed by Facebook.

    </p>
 
    <h3>ReactJS Advantages</h3>

    <ul>

        <li>

            Composable: We can divide these codes and put them

            in custom components. Then we can utilize

            those components and integrate them into one place.

        </li>

        <li>

            Declarative: In ReactJS, the DOM is declarative. 

            We can make interactive UIs by changing the

            state of the component and ReactJS takes care of 

            updating the DOM according to it.

        </li>

    </ul>
 
</main>
);
}

CSS

/* page.modules.css */
 
.main {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    padding: 6rem;

    min-height: 100vh;
}

Output:

Layout js

Article Tags :

ReactJS

Web Technologies

Next.js