Next.js中TypeScript环境下getInitialProps失效问题的解决方法

Hey，我之前在维护Next.js + TypeScript项目时也踩过getInitialProps的坑，结合社区里的讨论和自己的实践，整理了几个能解决问题的方案，你可以挨个试试：

1. 规范类型定义配置 #

首先得确保项目的TypeScript依赖和类型文件匹配，先执行这个命令安装正确的类型包：

npm install @types/next @types/react --save-dev

类组件场景 #

给getInitialProps明确指定NextPageContext类型，同时定义好组件的Props接口，避免类型推断混乱：

import React from 'react';
import { NextPageContext } from 'next';

interface MyComponentProps {
  pageData: string;
}

class MyComponent extends React.Component<MyComponentProps> {
  static async getInitialProps(ctx: NextPageContext) {
    // 这里写你的数据获取逻辑
    const res = await fetch('https://api.example.com/data');
    const data = await res.text();
    
    return { pageData: data };
  }

  render() {
    return <div>{this.props.pageData}</div>;
  }
}

export default MyComponent;

函数组件场景 #

用NextPage类型来包裹你的页面组件，它已经内置了getInitialProps的类型支持，不用手动额外定义：

import { NextPage, NextPageContext } from 'next';

interface MyPageProps {
  pageData: string;
}

const MyPage: NextPage<MyPageProps> = (props) => {
  return <div>{props.pageData}</div>;
};

MyPage.getInitialProps = async (ctx: NextPageContext) => {
  const res = await fetch('https://api.example.com/data');
  const data = await res.text();
  
  return { pageData: data };
};

export default MyPage;

2. 升级Next.js与TypeScript版本 #

早期的Next.js 5.x版本对TypeScript的getInitialProps支持确实存在已知bug，建议升级到更稳定的新版本：

• 如果是维护旧项目，至少升级到Next.js 8.x及以上版本，这个版本对TypeScript的支持已经成熟很多
• 同时要保证TypeScript版本和Next.js版本兼容，比如Next.js 13建议搭配TypeScript 4.9及以上版本

3. 避免依赖自动类型推断 #

不要让TypeScript自动推断getInitialProps的返回值类型，手动定义清晰的Props接口是最稳妥的方式。比如上面示例里的MyComponentProps和MyPageProps，明确指定每个属性的类型，能避免很多隐藏的类型错误。

4. 检查自定义_app.tsx的类型配置 #

如果你的项目里有自定义的_app.tsx文件，一定要确保它的类型配置正确，否则会导致页面的getInitialProps返回值无法正确传递给组件：

import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

这里的AppProps是Next.js提供的内置类型，能确保pageProps的类型和页面组件的Props匹配。

内容的提问来源于stack exchange，提问作者lukas