Use multiple layouts at multiple pages in next.js

Next.js

https://nextjs.org/

Layout

https://en.wikipedia.org/wiki/Page_layout

How to use in next.js

// pages/_app.js

import LayoutDefault from '../components/LayoutDefault'

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

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

Change layout on another page

// pages/any_thing.js

import AnotherLayout from '../components/AnotherLayout'

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

Page.getLayout = (page) => (
  <AnotherLayout>
{page}
  </AnotherLayout>
)