Next.js如何使用TypeScript为Error错误页添加类型定义

原有代码问题修正 #

你原有代码存在两处类型定义错误：

• InitialProps中err字段类型标注错误，err不是NextApiResponse类型，是扩展了statusCode属性的原生Error实例
• 无需手动定义getInitialProps入参类型，Next.js已提供内置的NextPageContext通用类型

以下是Pages Router模式下的完整正确实现：

import type { NextPage, NextPageContext } from 'next'

// 组件入参类型定义
interface ErrorProps {
  statusCode: number
}

const Error: NextPage<ErrorProps> = ({ statusCode }) => {
  return (
    <p>
      {statusCode
        ? `服务器端发生错误，错误码：${statusCode}`
        : "客户端发生错误"}
    </p>
  )
}

Error.getInitialProps = ({ res, err }: NextPageContext) => {
  // 新增空值合并运算符避免类型不安全问题
  const statusCode = res ? res.statusCode : err ? err.statusCode ?? 404 : 404
  return { statusCode }
}

export default Error

Next.js 13+ App Router 错误页类型定义 #

如果使用App Router模式，错误页error.tsx有单独的内置类型可以直接使用：

'use client' // App Router错误页强制要求为客户端组件

import type { ErrorProps } from 'next/error'

export default function Error({ error, reset }: ErrorProps) {
  return (
    <div>
      <h2>发生异常错误</h2>
      <button onClick={() => reset()}>点击重试</button>
    </div>
  )
}

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