Is NextPage necessary when building NextJS apps in TypeScript

user_9101619 0
Viewed 11491

In the nextJS examples, specifically the example showing how to use TypeScript with NextJS, they don't use the NextPage type.

The file I'm talking about is here: https://github.com/vercel/next-learn-starter/blob/master/typescript-final/pages/posts/%5Bid%5D.tsx and the relevant code is this:

export default function Post({
  postData
 }: {
    postData: {
    title: string
    date: string
    contentHtml: string
  }
 }) {
   return (...

I'd think that it could be written like this:

export default function Post : NextPage<Props> ({
  postData
 }: {
    postData: {
    title: string
    date: string
    contentHtml: string
  }
 }) {
   return (...

or something similar.

My question is, I can't find any doc's in the NextJS site on using the imported interface NextPage, and specifically, the next team left it out of their documentation.

Should I be using NextPage?

typescript next.js reactjs
2 Answers

Both is ok. It's just a type.

If you add the NextPage<Props>, then the type declaration in parameter is not necessary. You can simplify it as

export default function Post : NextPage<Props> ({ postData }) {
  ...
}
user_78035270

Should I be using NextPage?

NextPage is the type of the return, and Props is the type of the argument to the function.

Post : NextPage<Props>

I would include both, as although these can be interpreted by TS it is better to explicitly state them - some linters have rules which enforce their inclusion.

user_115610000
Related