Use getLayout function to customize layout

[Alberto R Cahyantara]

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} />)
}

[Remi Wg]

@riolly, this also something I use personally but I didn't integrate it. Should we?

[Alberto R Cahyantara]

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.

[Danny]

I think the getLayout pattern should be implemented.

[Remi Wg]

I think we can directly switch to the app directory when the feature come out from the beta and there are still some missing feature: https://beta.nextjs.org/docs/app-directory-roadmap#planned-features

Hope the beta won't last too long.

[Remi Wg]

Planning to switch directly to app directory when the feature come out from the beta.