使用Next.js App Router实现表单发邮件时遇500服务器错误求助

问题详情 #

我正在用Next.js新的App Router构建自动发邮件的表单，编写了以下代码：

Prices.js中的POST请求代码：

// Prices.js
async function sendMsg(e) {
    e.preventDefault();
    
    const res = await fetch('http://localhost:3000/api', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({test: 'ok'}),
    });
    console.log(res);
}

对应的API路由处理文件route.js：

// route.js
import { NextResponse } from 'next/server';
console.log('the route file!!! start');

export async function POST(request) {
    console.log('api post resquest ----> ', request);
    return NextResponse.json({res: 'ok'});
}

但始终收到500内部服务器错误，错误信息如下：

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

已尝试将api文件夹移至[locale]目录、启用Server Actions，问题仍未解决。

解决步骤 #

• 规范API路由结构：在App Router中，API路由需遵循app/api/[子路由]/route.js的结构。确保你的route.js位于app/api的子文件夹内（比如app/api/mail/route.js），避免路由解析冲突。
• 不要直接打印request对象：request是Next.js封装的NextRequest实例，直接打印会触发内部断言错误。改为提取请求体后打印：

  export async function POST(request) {
    const reqBody = await request.json();
    console.log('请求体内容：', reqBody);
    return NextResponse.json({res: 'ok'});
  }
  

• 使用相对路径发起请求：组件内的fetch请求改用相对路径/api，避免绝对路径带来的环境适配问题：

  const res = await fetch('/api', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify({test: 'ok'}),
  });
  

• 避免混合使用传统fetch与Server Actions：如果启用了Server Actions，不要同时在表单的onSubmit事件中调用fetch函数，避免上下文冲突。
• 升级Node.js版本：Next.js 13+要求Node.js版本≥18.x，低版本可能触发内部断言错误，建议升级至稳定版。

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