NextJS中无法获取HTTP POST请求Body的问题求助

你遇到的问题是因为Next.js App Router的Route Handler中，req.body返回的是标准Web API的ReadableStream，而非直接解析好的对象。要获取表单提交的数据，需要根据请求的Content-Type选择对应的解析方法，具体修正步骤如下：

1. 修正路由处理器文件名 #

App Router要求API路由文件必须命名为route.js（或route.ts），你需要将/response/response.js重命名为/app/response/route.js，确保目录结构与路由路径对应。

2. 调整表单提交路径 #

将页面中表单的action属性改为"/response"，与路由路径匹配：

<form action="/response" method="post">
  <!-- 表单原有内容保持不变 -->
</form>

3. 正确解析表单请求体 #

表单默认以application/x-www-form-urlencoded格式提交，使用req.formData()方法解析数据，示例代码如下：

import { NextResponse } from 'next/server';

export async function POST(req) {
  // 异步解析表单数据
  const formData = await req.formData();
  // 将FormData转换为普通JavaScript对象
  const body = Object.fromEntries(formData);
  
  console.log(body); // 输出格式: { first: "输入的名字", last: "输入的姓氏" }
  return NextResponse.json(body);
}

如果需要单独获取某个字段，可直接使用formData.get('字段名')：

const firstName = formData.get('first');
const lastName = formData.get('last');

补充说明 #

• 若请求为JSON格式，改用await req.json()解析；
• 若需要原始文本内容，使用await req.text()；
• 所有解析方法均为异步操作，必须添加await关键字。

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