Next JS Layout Component
Last Updated :
20 Feb, 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 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
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
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
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 6rem;
min-height: 100vh;
}
|
Output:
Layout js
Share your thoughts in the comments
Please Login to comment...