Next.js使用NextApiResponse返回响应失败，Vercel报TypeError错误

错误原因 #

你混淆了Next.js两种路由体系的API写法：

• App Router（app目录下的API路由）的GET函数不接收res参数，要求直接返回NextResponse实例；
• NextApiResponse是Pages Router（pages/api目录下）的API路由才会传入的响应对象。

在App Router环境下，你定义的res参数实际是无效值，调用res.status()自然会抛出TypeError: t.status is not a function。

解决办法 #

方案1：改用Pages Router的API路由结构 #

如果要保留res.status().send()的写法，将文件移动到pages/api/目录下（比如pages/api/demo.ts），代码调整为Pages Router的标准格式：

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    res.status(200).send(3)
  }
}

方案2：在App Router下模拟res.status().send()写法 #

如果要保留在app目录下，可封装一个简易工具函数模拟你习惯的调用链，适配App Router的NextResponse规则：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

// 模拟res.status().send()的调用结构
const createMockRes = () => ({
  status: (code: number) => ({
    send: (data: any) => new NextResponse(String(data), { status: code })
  })
})

export async function GET(req: NextRequest) {
  const res = createMockRes()
  return res.status(200).send(3)
}

补充说明 #

你用NextResponse能正常运行，是因为App Router的API路由标准返回就是NextResponse（它是Web标准Response对象的扩展），Vercel部署时能正确识别这种格式。

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