Next.js 12.1.16+提示next无NextApiRequest/Response导出如何解决

该报错是版本迭代时类型导出路径调整导致的：<12.1.16版本中两个类型从next包根路径直接导出，≥12.1.16版本收拢了根路径导出的成员，直接从根路径导入会触发TS模块无对应成员的报错，可通过以下任意一种方案修复：

方案1：调整类型导入路径 #

将两个类型的导入源从next根路径修改为官方提供的类型专属入口，示例代码：

// 失效写法
// import type { NextApiRequest, NextApiResponse } from 'next'

// 有效写法
import type { NextApiRequest, NextApiResponse } from 'next/types'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ code: 0 })
}

方案2：用内置Handler类型自动推导参数类型 #

无需单独导入请求、响应对象类型，直接使用官方封装的NextApiHandler泛型定义路由处理函数，TS会自动推导req、res的类型，写法更简洁：

import type { NextApiHandler } from 'next'

// 泛型参数传入响应体的TS类型即可
const apiHandler: NextApiHandler<{ code: number; data?: unknown }> = (req, res) => {
  // 此处req、res自动获得正确类型，无需额外标注
  res.status(200).json({ code: 0 })
}

export default apiHandler

修复后仍报错的排查项 #

• 检查tsconfig.json中compilerOptions.moduleResolution配置，需设置为node或nodenext，匹配Node.js模块解析规则
• 确认本地TypeScript版本≥4.5，避免低版本TS的类型解析兼容问题
• 清除缓存后重试：删除项目.next目录、node_modules/.cache目录，重启IDE的TS语言服务即可

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