Creating Nested Layouts with Next.js | Updated 2024

61

Nested layouts in Next.js allow you to create complex page structures with shared components like headers, footers, and sidebars. This guide will walk you through setting up nested layouts in a Next.js application.

Prerequisites

Ensure you have the following installed:

• Node.js
• npm or yarn

Steps for Creating Nested Layouts with Next.js

Step 1: Setting Up the Next.js Project

First, create a new Next.js project:

npx create-next-app my-nextjs-nested-layouts
# or
yarn create next-app my-nextjs-nested-layouts

Navigate to the project directory:

cd my-nextjs-nested-layouts

Step 2: Creating Layout Components

Create the layout components that will be used to structure your pages.

Create a components directory in the root of your project

mkdir components

Create a Layout.js file for the main layout

// components/Layout.js
import Header from './Header';
import Footer from './Footer';

export default function Layout({ children }) {
  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

Create a Header.js file for the header component

// components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/dashboard">Dashboard</a>
      </nav>
    </header>
  );
}

Create a Footer.js file for the footer component

// components/Footer.js
export default function Footer() {
  return (
    <footer>
      <p>&copy; 2024 My Website</p>
    </footer>
  );
}

Create a DashboardLayout.js file for the nested dashboard layout

// components/DashboardLayout.js
import Sidebar from './Sidebar';

export default function DashboardLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <Sidebar />
      <div style={{ flexGrow: 1, padding: '20px' }}>
        {children}
      </div>
    </div>
  );
}

Create a Sidebar.js file for the sidebar component

// components/Sidebar.js
export default function Sidebar() {
  return (
    <aside>
      <nav>
        <ul>
          <li><a href="/dashboard">Dashboard Home</a></li>
          <li><a href="/dashboard/profile">Profile</a></li>
          <li><a href="/dashboard/settings">Settings</a></li>
        </ul>
      </nav>
    </aside>
  );
}

Step 3: Creating Pages with Nested Layouts

Next, create pages that use the nested layouts.

Modify pages/_app.js to include the main layout

// pages/_app.js
import Layout from '../components/Layout';
import '../styles/globals.css';

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

export default MyApp;

Create a home page in pages/index.js

// pages/index.js
export default function Home() {
  return (
    <div>
      <h2>Welcome to My Website</h2>
      <p>This is the home page.</p>
    </div>
  );
}

Create an about page in pages/about.js

// pages/about.js
export default function About() {
  return (
    <div>
      <h2>About Us</h2>
      <p>This is the about page.</p>
    </div>
  );
}

Create a dashboard home page in pages/dashboard/index.js

// pages/dashboard/index.js
import DashboardLayout from '../../components/DashboardLayout';

function DashboardHome() {
  return (
    <div>
      <h2>Dashboard Home</h2>
      <p>Welcome to the dashboard.</p>
    </div>
  );
}

DashboardHome.getLayout = function getLayout(page) {
  return (
    <DashboardLayout>
      {page}
    </DashboardLayout>
  );
}

export default DashboardHome;

Create a profile page in pages/dashboard/profile.js

// pages/dashboard/profile.js
import DashboardLayout from '../../components/DashboardLayout';

function Profile() {
  return (
    <div>
      <h2>Profile</h2>
      <p>This is the profile page.</p>
    </div>
  );
}

Profile.getLayout = function getLayout(page) {
  return (
    <DashboardLayout>
      {page}
    </DashboardLayout>
  );
}

export default Profile;

Step 4: Handling Nested Layouts in _app.js

Update _app.js to handle pages with nested layouts

// pages/_app.js
import Layout from '../components/Layout';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);

  return getLayout(<Component {...pageProps} />);
}

export default MyApp;

Conclusion

In this guide, we created a Next.js application with nested layouts. We set up the project, created layout components, and built pages using these layouts. This setup allows for flexible and reusable page structures in your Next.js applications.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Creating Nested Layouts with Next.js – FAQs