Hello,

I found this code on the Nextjs website:

import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
 
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}
 
type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}
 
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)
 
  return getLayout(<Component {...pageProps} />)
}

so in the page routes, e.g. /pages/dashboard/index.tsx:

const DashboardPage: NextPage = () => {
  return ()
}

export default DashboardPage

DashboardPage.getLayout = page => (
  <AuthGuard>
    <Layout>{page}</Layout>
  </AuthGuard>
)

it'll be this way only or it'll be little different?

can anyone help me on this?