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 (
      <Component {...pageProps} />

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">

Complex problems, Simple Solutions