Next.js Layouts - Building a Consistent UI
NextJS
Next.js Layouts - Building a Consistent UI
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 (
<div>
<header>
<h1>My App</h1>
</header>
<main>{children}</main>
<footer>
<p>© 2023 My App</p>
</footer>
</div>
);
}
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 (
<Layout>
<h2>Welcome to the Home Page</h2>
<p>This is the home page content.</p>
</Layout>
);
}
export default HomePage;
By wrapping your content in the layout component, you ensure that the common UI structure is applied to each page.