DEV Community

Rahul kumar
Rahul kumar

Posted on

3

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} />)
}
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay