Next.js Layouts

Are you tired of manually updating the layout for every page in your web application? Well, don’t worry! Using Next.js layouts, you can easily create and apply consistent layout components across your entire web app or specific sections of it. Next.js is a react-based framework. It has the power to develop beautiful web applications for different platforms like Windows, Linux, and mac. One of the most powerful features of Next.js is its ability to use layouts to create reusable templates for your application. In this article, we will see Next.js Layouts. 

What are Layouts in  Next.js?

Layouts in Next.js is a higher-order component (HOC) that wraps your application’s pages. It allows you to define a consistent structure and appearance for all your pages, making it easy to maintain a consistent user experience. Layouts are a great way to reuse code and save time, especially when building larger applications.

Benefits of using layouts in Next.js:

Layouts can be very beneficial for all of us while building any web application. Below are some of the benefits that Next.js provide in Layouts:

• Consistency: Using a layout in your application, ensures that all pages in your application have a consistent structure and appearance. which makes it easier for the users to navigate your application easily and understand its purpose.
• Reusability: Layouts help in reusing code and saving time when building larger applications. If you have created a single layout component and have used it across multiple pages, you can avoid duplicating code and may reduce the risk of errors.
• Scalability: As your application grows, layouts make it easier to manage the structure and appearance of your pages. By defining a layout, you can quickly update the structure and appearance of all pages in your application.

Syntax:

const Layout = ({ children }) => {
  return (
    <div>
      <header>Your header</header>
      <main>{children}</main>
      <footer>Your footer</footer>
    </div>
  )
}

Pre-requisite: Before creating a layout in Next.js, make sure you have created a  Next.js project. See the NextJS Introduction.

Steps to create a Next.js Layout:

Step 1: First, we need to create a new file in our components folder and name it like “Layout.js”

Javascript

import React from 'react'

const Layout = ({ children }) => {
    return (
        <div>
            <header>Navbar</header>
            <main>{children}</main>
            <footer>Footer</footer>
        </div>
    )
}

export default Layout;

In this file, we have defined our layout component which consists of a header, a main section, and a footer. The children’s prop is used to pass in the content of the page being wrapped by the layout.

Step 2: Single Shared Layout with Custom App

Setting the layout in a single page: After creating a layout component, it is now available to use on the pages. To do that we can import it and wrap it in a page component with it. For example, if we have a page called “About.js”, we can wrap it with the layout below:

Javascript

//pages/About.js

import React from 'react'
import Layout from '../components/Layout'

const About = () => {
  return (
    <Layout>
      <h1>About page</h1>
      <p>This is the about page content.</p>
    </Layout>
  )
}

export default About

In the above code, the About page component is wrapped with the Layout component. The content of the page is passed to the layout component via the children’s prop.

Setting the default layout for all pages: What If you only want to set one layout in your entire app? To do this, you can create an _app.js file in the pages directory and define the default layout component like the below:

Javascript

// pages/_app.js

import Layout from '../components/layout'

function MyApp({ children, Component }) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}

export default MyApp;

In the above code, the MyApp component is used as a wrapper for all pages in the application. The Component prop represents the current page being rendered, and the pageProps prop contains any initial props passed to the page.

Example: Below example demonstrates how to create a layout and use it with other pages.

In the below example, we have created a layout component in the layout.js file. After creating it, we exported the component to use it on other pages. In the _app.js file inside the pages folder, we have added our layout component by importing it and wrapped the layout component in the About.js component.

Javascript

//pages/_app.js

import "../styles/globals.css";
import Layout from '../components/layout'
import About from "./About";

function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <About />
        </Layout>
    );
}

export default MyApp;

Javascript

//pages/About.js

import React from 'react'

function About() {
    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Welcome to GeeksforGeeks About Page</h1>
        </div>
    )
}

export default About

Javascript

//components/layout.js

import React from 'react'

const Layout = ({ children }) => {
    return (
        <div>
            <header style={{
                backgroundColor: 'green',
                color: 'white',
                padding: 10
            }}>
                Navbar
            </header>

            <main>{children}</main>

            <footer style={{
                backgroundColor: 'black',
                color: 'white',
                padding: 10,
                position: 'fixed',
                bottom: 0,
                width: '100%'
            }}>
                Footer
            </footer>
        </div>
    )
}

export default Layout;

Step to run:

Step 1: Run the following command in your project directory:

npm run dev

Step 2: Go to localhost:portnumber

localhost:3000

Output:

NextJS Layouts

Reference: https://nextjs.org/docs/basic-features/layouts