Next.js API路由返回JSON响应报错TypeError，寻求解决方案

问题根源 #

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

• App Router（app目录下的route.ts） 使用Web标准的Request/Response对象，路由函数仅接收request一个参数，不存在NextApiResponse类型的第二个参数。
• NextApiRequest/NextApiResponse是Pages Router（pages/api目录） 的专属类型，不能直接在App Router的route.ts中使用。

解决办法 #

方法1：使用App Router标准写法（推荐）

保持app/api/hello/route.ts路径，改用Web标准的Response返回JSON：

export async function GET(request: Request) {
  // Next.js 13.4+简化写法
  return Response.json({ message: "Hello, Next.js!" });
}

或者用完整的new Response写法：

export async function GET(request: Request) {
  return new Response(JSON.stringify({ message: "Hello, Next.js!" }), {
    headers: { "Content-Type": "application/json" },
  });
}

方法2：切换到Pages Router写法

如果需要使用NextApiRequest/NextApiResponse，需创建Pages Router的API文件：

1. 在项目根目录新建pages/api/hello.ts文件
2. 写入以下代码：

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.status(200).json({ message: "Hello, Next.js!" })
}

访问localhost:3000/api/hello即可正常返回JSON。

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