nextjs web layout


A common layout for web applications is to have a header, a main content area, and a footer. Here’s an example of how you can create this layout in a Next.js application using the Header, Main, and Footer components:

import Header from '../components/Header'
import Footer from '../components/Footer'

function Layout({ children }) {
  return (
      <Header />
      <Footer />

export default Layout

To use this layout, you can wrap your page components in the Layout component like this:

import Layout from '../components/Layout'

function Home() {
  return (
      <h1>Welcome to my app!</h1>
      <p>This is the home page.</p>

export default Home

This will render the header, main content, and footer in your page. You can customize the header and footer components to include navigation links, logos, or any other content you want to include in your layout.