Next.js 13 API报错：res.status is not a function

问题重现 #

开发首个Next.js应用时，在App Router目录结构下创建测试API /app/api/isWorking/route.ts，代码如下：

import type { NextApiRequest, NextApiResponse } from "next";

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ message: "working" });
}

在app/account/page.tsx中调用该API：

"use client";

export default function Account() {
  const testApi = () => {
    fetch("/api/isWorking")
      .then((response) => response.json())
      .then((data) => {
        console.log(data.message);
      })
      .catch((error) => {
        console.error("Error fetching data: " + error);
      });
  };

  return (
    <div>
      <button onClick={testApi} className="">
        test api
      </button>
    </div>
  );
}

运行后抛出错误：

- error TypeError: res.status is not a function
    at GET (webpack-internal:///(rsc)/./src/app/api/isWorking/route.ts:6:9)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:254:43)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/trace/tracer.js:111:36)
    at NoopContextManager.with (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30)
    at ContextAPI.with (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58)
    at NoopTracer.startActiveSpan (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:953:34)
    at ProxyTracer.startActiveSpan (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:993:36)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/trace/tracer.js:100:107)
    at NoopContextManager.with (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30)
    at ContextAPI.with (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58)
    at NextTracerImpl.trace (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/trace/tracer.js:100:32)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:242:53)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at Object.wrap (webpack-internal:///(rsc)/./node_modules/next/dist/server/async-storage/static-generation-async-storage-wrapper.js:42:24)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:196:97)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at Object.wrap (webpack-internal:///(rsc)/./node_modules/next/dist/server/async-storage/request-async-storage-wrapper.js:82:24)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:195:75)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at AppRouteRouteModule.execute (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:192:56)
    at AppRouteRouteModule.handle (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:315:41)

使用环境：Node.js 20.6.1

错误原因 #

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

• NextApiRequest/NextApiResponse是Pages Router（pages/api/目录）的类型和响应方式
• 当前使用的是App Router（app/api/目录）的Route Handlers，它不依赖res对象返回响应，而是直接返回Response实例或NextResponse实例

修复方案 #

修改/app/api/isWorking/route.ts代码，改用App Router的响应方式：

方案1：使用NextResponse（推荐） #

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ message: "working" }, { status: 200 });
}

方案2：直接返回原生Response #

export async function GET() {
  return new Response(JSON.stringify({ message: "working" }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

app/account/page.tsx中的调用代码无需修改，保持原样即可。

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