_app,js for multiple Layouts in next.js

_app.tsx

import '../styles/globals.scss'
import type { AppProps } from 'next/app'
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'

type Page<P = {}> = NextPage<P> & {
  getLayout?: (page: ReactNode) => ReactNode;
};

type Props = AppProps & {
  Component: Page;
};


function MyApp({ Component, pageProps }: Props ) {

  const getLayout = Component.getLayout ?? ((page: ReactNode) => page);

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

}

export default MyApp