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.

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.

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.

Output:

• This is a Next.js project using the App Router and globals.css for styling.
• The project demonstrates a React tutorial page with basic explanations and advantages of ReactJS.
• It uses the Advent Pro Google Font and modular CSS (page.module.css) for component-level styling.