defining component layout next ts

1import type { AppProps } from 'next/app'
2import { Fragment } from 'react'
3import type { Page } from '../types/page'
4
5// this should give a better typing
6type Props = AppProps & {
7  Component: Page
8}
9const MyApp = ({ Component, pageProps }: Props) => {
10  // adjust accordingly if you disabled a layout rendering option
11  const getLayout = Component.getLayout ?? (page => page)
12  const Layout = Component.layout ?? Fragment
13
14  return (
15    <Layout>
16      {getLayout(<Component {...pageProps} />)}
17    </Layout>
18  )
19
20  // or swap the layout rendering priority
21  // return getLayout(<Layout><Component {...pageProps} /></Layout>)
22}
23
24export default MyApp
25

1import { NextPage } from 'next'
2import { ComponentType, ReactElement, ReactNode } from 'react'
3
4export type Page<P = {}> = NextPage<P> & {
5  // You can disable whichever you don't need
6  getLayout?: (page: ReactElement) => ReactNode
7  layout?: ComponentType
8}
9