在 TypeScript 中构建 NextJS 应用程序时是否需要 NextPage

Question

在 nextJS 示例中，特别是展示如何将 TypeScript 与 NextJS 结合使用的示例，它们不使用 NextPage 类型。

我正在谈论的文件在这里： https: //github.com/vercel/next-learn-starter/blob/master/typescript-final/pages/posts/%5Bid%5D.tsx相关代码是这样的：

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

我认为可以这样写：

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

或类似的东西。

我的问题是，我在 NextJS 站点中找不到任何有关使用导入的接口 NextPage 的文档，具体来说，下一个团队将其排除在文档之外。

我应该使用 NextPage 吗？

Answer 1

两者都可以。这只是一种类型。

如果添加NextPage<Props>，则参数中的类型声明不是必需的。你可以将其简化为

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

Answer 2

我应该使用 NextPage 吗？

NextPage 是返回值的类型，Props 是函数参数的类型。

Post : NextPage<Props>

我会将两者都包含在内，因为虽然这些可以由 TS 解释，但最好明确说明它们 - 某些 linter 具有强制包含它们的规则。