Theo's Typesafe Cult•2y ago

Benefits of NextPage type

As in the title. What are benefits of typing our next pages with NextPage type. (Next 13, pages dir) The only one I see is that I have to return JSX but since react 18 React.FC type does the same and not intentionaly types children why wouldn't I use it insead of NextPage?

1 Reply

.hatulapro•2y ago

NextPage allows you to set getInitialProps on your page (https://nextjs.org/docs/api-reference/data-fetching/get-initial-props). Passing a generic type to it will also force getInitialProps to return that type.

const Page: NextPage<{x: number}> = ({ x }) => (
  <main>{x} is a number</main>
)

Page.getInitialProps = () => {
  // If this doesn't return an object of type  {x: number} TS will show an error
  return { x: 9001 }
}

const Page: NextPage<{x: number}> = ({ x }) => (
  <main>{x} is a number</main>
)

Page.getInitialProps = () => {
  // If this doesn't return an object of type  {x: number} TS will show an error
  return { x: 9001 }
}

It probably doesn't matter if you're not using getInitialProps though. Personally I just use it to make it clear that a component a page

Gaming

Programming

Benefits of NextPage type