next js global layout

Step 1: Create a new file named _app.js in the pages directory.

Step 2: Import the App component from the next/app module.

// _app.js
import { App } from 'next/app';

Step 3: Define a custom App component that extends the imported App component.

// _app.js
class MyApp extends App {
  // Your custom implementation here
}

Step 4: Create a global layout component, for example, Layout.js in the components directory.

// components/Layout.js
const Layout = ({ children }) => {
  // Your layout implementation here
  return <div>{children}</div>;
};

export default Layout;

Step 5: Import the created Layout component into the custom App component.

// _app.js
import Layout from '../components/Layout';

Step 6: Wrap the Component prop with the Layout component in the render method of the custom App component.

// _app.js
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    );
  }
}

export default MyApp;

Step 7: Your global layout is now applied to all pages in the Next.js application. Customize the Layout component as needed for your specific layout requirements.