Next.js Layouts - GeeksforGeeks

Layouts in Next.js allow you to create reusable structures that can be shared across multiple pages. This ensures a consistent look and feel throughout your application while reducing code duplication. Next.js 13 introduced enhanced layout capabilities, allowing for nested and dynamic layouts. In this article, we will see Next.js Layouts.

Prerequisites:

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.

Syntax:

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

Global Layouts:

Define a layout that wraps your entire application. This is typically used for elements like headers, footers, and navigation bars that appear on every page.

The global layout wraps the complete application and for which it is use in _app.js file.

// pages/_app.js

import Layout from '../components/layout'

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

export default MyApp;

Nested Layouts:

Create layouts that are specific to certain sections of your application. For example, an admin dashboard may have a different layout from the public-facing pages.

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
    return (
        <div className="dashboard-layout">
            <aside>Dashboard Sidebar</aside>
            <main>{children}</main>
        </div>
    );
}

// app/dashboard/page.js
export default function DashboardPage() {
    return <h1>Dashboard Home</h1>;
}

Dynamic Layouts:

Adjust layouts dynamically based on the context or route parameters. This is useful for changing the layout based on user roles or specific page requirements.

export default function RoleBasedLayout({ children, params }) {
    return (
        <div className={`layout-${params.role}`}>
            <header>{params.role} Header</header>
            <main>{children}</main>
        </div>
    );
}

// app/[role]/page.js
export default function RolePage({ params }) {
    return <h1>{params.role} Page</h1>;
}

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

// Filename - components/Layout.js

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