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.