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