Introduction to Next.js Layouts

Layouts in Next.js are an essential part of building a consistent and reusable user interface. They allow you to create a common structure for your pages, such as headers, footers, navigation menus, and more. In this tutorial, we'll learn how to create layouts in Next.js.

Creating a Layout Component

1. Start by creating a new JavaScript file for your layout component. For example, let's create a file named Layout.js:

// components/Layout.js
import React from 'react';
function Layout({ children }) {
return (
<h1>My App</h1>
<p>© 2023 My App</p>
export default Layout;

In this layout component, we've defined a common structure with a header, main content area, and footer.

Using the Layout Component

2. In your individual pages, you can use the layout component to wrap your content. For example:

// pages/index.js
import Layout from '../components/Layout';
function HomePage() {
return (
<h2>Welcome to the Home Page</h2>
<p>This is the home page content.</p>
export default HomePage;

By wrapping your content in the layout component, you ensure that the common UI structure is applied to each page.