Horje
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

Steps to Create the project

Project Structure:

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

Layout js


 


Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Fonts in Next JS Fonts in Next JS
Built-in React Hooks Built-in React Hooks
What does useImperativeHandle do, and when do we use it? What does useImperativeHandle do, and when do we use it?
How to create Grid Lights Using React ? How to create Grid Lights Using React ?
State Management with useState Hook in React State Management with useState Hook in React

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 16



 

Horje