What are layouts in Next.js and how do I use them?

What are layouts in Next.js and how do I use them?

Layouts in Next.js are reusable components that help you maintain a consistent structure across your pages. You can create a layout component and wrap your page content with it.

Can you show me an example of a layout component?

Sure! Here's a simple example:

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

const Layout = ({ children }) => {
  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  );
};

export default Layout;

How do I use this layout in my pages?

You can use the layout in your pages like this:

// pages/index.js
import Layout from '../components/Layout';

const HomePage = () => {
  return (
    <Layout>
      <h1>Welcome to my website!</h1>
    </Layout>
  );
};

export default HomePage;

Can I have multiple layouts for different pages?

Yes, you can create multiple layout components and use them as needed for different pages. Just import the desired layout in each page.