Example of how to use the Layout.js component in a Next.js page?

Here’s an example of how you can use the Layout.js component in a Next.js page:

Assuming you have a Layout.js component defined in the components directory, which provides a basic layout structure for your pages, you can use it as follows:

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

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

export default Layout;

In your Next.js page, you can import the Layout.js component and wrap your page content with it:

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

const HomePage = () => {
  return (
    <Layout>
      <h1>Welcome to the Homepage</h1>
      <p>This is the content of the homepage.</p>
    </Layout>
  );
};

export default HomePage;