Next.js App Router调用/api接口返回500错误：this需为EventTarget类型

使用最新版Next.js + App Router调用/api端点时返回500错误，错误信息：

Error [ERR_INTERNAL_ASSERTION]: TypeError [ERR_INVALID_THIS]: Value of "this" must be of type EventTarget

问题根源 #

API路由文件错误混用了Pages Router的类型定义：NextApiRequest/NextApiResponse是旧版Pages Router的API类型，App Router的app/api/route.ts采用标准Web API的Request对象，强行导入旧类型会触发内部断言错误。

解决方案 #

1. 修正API路由文件（app/api/route.ts） #

移除旧类型导入，改用App Router原生的Request对象：

import { NextResponse } from "next/server";

export const POST = async (req: Request) => {
  // 解析请求体（如果需要）
  const body = await req.json();
  console.log("收到的授权码：", body.code);

  return NextResponse.json({ data: "accessToken" });
};

2. 客户端代码优化（规范写法） #

• 改用相对路径调用API，避免硬编码域名
• 添加错误捕获逻辑，处理请求失败场景
• 客户端环境变量需以NEXT_PUBLIC_开头才能被浏览器访问

"use client";

import { useSearchParams } from "next/navigation";

export default function Home() {
  const authorizeTwitchApp = `${process.env.NEXT_PUBLIC_TWITCH_API_URL}/oauth2/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_TWITCH_CLIENT_ID}&redirect_uri=http://localhost:3000&scope=channel%3Amanage%3Apolls+channel%3Aread%3Apolls+openid`;

  const queryParam = useSearchParams().get("code");

  const getAccessToken = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    if (!queryParam) return;

    try {
      const response = await fetch("/api", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ code: queryParam }),
      });

      if (!response.ok) throw new Error("API请求失败");
      const data = await response.json();
      console.log(data);
    } catch (err) {
      console.error("请求出错：", err);
    }
  };

  return (
    <div>
      <a href={authorizeTwitchApp}>点击授权Twitch</a>
      <button onClick={getAccessToken}>发送授权码到API</button>
    </div>
  );
}

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