在带有 TypeScript 的 Next.js 中使用 getInitialProps

发布于08月10日

从文档中，下一步.js 5.0的发布和互联网上的各种文章似乎是下一个.js很好地支持TypeScript，很多人都在使用它.

但这些线索表明，getInitialProps，这是至关重要的下一步.js应用程序不起作用:

我该怎么修？在类组件和功能组件中，当我执行ComponentName.getInitialProps = async function() {...}次操作时，会出现以下错误:

[ts] Property 'getInitialProps' does not exist on type '({ data }: { data: any; }) => Element'.

编辑2021/04/23:我下面的答案也过时了

有关使用新类型和命名导出键入数据获取方法的当前建议，请参见the Next.js docs.

tl；博士:

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

export const getStaticProps: GetStaticProps = async (context) => {
  // ...
}

export const getStaticPaths: GetStaticPaths = async () => {
  // ...
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  // ...
}

过时(但功能性)答案:

以上答案从明年起就过时了.js现在正式支持TypeScript(公告here)

这个版本的一部分是更好的TypeScript类型，还有很多Next.js是用TypeScript本身编写的.这意味着@types/next美元的一揽子计划将被弃用，取而代之的是下一个正式的计划.js打字.

相反，您应该导入NextPage type并将其分配给您的组件.您也可以使用NextPageContext类型键入getInitialProps.

import { NextPage, NextPageContext } from 'next';

const MyComponent: NextPage<MyPropsInterface> = props => (
  // ...
)

interface Context extends NextPageContext {
  // any modifications to the default context, e.g. query types
}

MyComponent.getInitialProps = async (ctx: Context) => {
  // ...
  return props
}