Use getLayout function to customize layout

As it’s written on the official docs.

// pages/index.js

import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'

export default function Page() {
  return {
    /** Your content */
  }
}

Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

// pages/_app.js

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

[Dannymx]

I think the getLayout pattern should be implemented.

[riolly]

We use that pattern to avoid rerendering the layout component when navigating to a page with the same layout. (mimicking client-side navigation) And I think those who use this template have been familiar with next.js and (the other tech stack inside it) and will end up in that situation also.