Layouts in NextJS

Layout allows you to reuse components to build a page. e.g. Every page has a header and footer common in them. So you can create Layout component which renders these common components along with main page component. Below code is in _App.tsx.

import Layout from '../components/layout'

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

Below code is in Layout.tsx

import React from 'react'
import Header from './Header'
import Footer from './Footer'

export const Layout = ({ children }) => {

  return (
    <div className="container">
      <Header/>
     {children}
      <Footer/>    
    </div>
  )
}