/TypeScript/Defining component layout next ts

Defining component layout next ts

import { NextPage } from 'next'
import { ComponentType, ReactElement, ReactNode } from 'react'

export type Page<P = {}> = NextPage<P> & {
  // You can disable whichever you don't need
  getLayout?: (page: ReactElement) => ReactNode
  layout?: ComponentType
}

Source: stackoverflow.com

Defining component layout next ts

import type { AppProps } from 'next/app'
import { Fragment } from 'react'
import type { Page } from '../types/page'

// this should give a better typing
type Props = AppProps & {
  Component: Page
}
const MyApp = ({ Component, pageProps }: Props) => {
  // adjust accordingly if you disabled a layout rendering option
  const getLayout = Component.getLayout ?? (page => page)
  const Layout = Component.layout ?? Fragment

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

  // or swap the layout rendering priority
  // return getLayout(<Layout><Component {...pageProps} /></Layout>)
}

export default MyApp

Source: stackoverflow.com

Similar codes

0 vote276 views6 answers
Pdf to word converter
TypeScript
0 vote274 views1 answer
C# copy the elements of a list to another list
TypeScript
0 vote264 views1 answer
Display entry count for specific column using value_counts spyder.
TypeScript
20 votes260 views2 answers
Install ng bootstrap
TypeScript
2 votes295 views3 answers
Angular typescript refresh page
TypeScript
0 vote268 views1 answer
Try out the enumerate function for yourself in this quick exercise. Complete the skip_elements function to return every other element from the list, this time using the enumerate function to check if an element is on an even position or an odd positi
TypeScript
0 vote263 views1 answer
Share data across tab through localstorage
TypeScript
0 vote353 views1 answer
Check anagramm in typescript
TypeScript
0 vote320 views1 answer
Tox install requirements constraints
TypeScript
0 vote251 views1 answer
Elipses after hight
TypeScript