Next.js App Router客户端向POST路由传参时body解构为undefined问题

核心原因 #

在Next.js App Router的API路由中，request是标准的Web Request对象，无法直接通过request.body访问请求体，必须先调用request.json()（或对应解析方法如formData()）解析请求内容。你的代码遗漏了解析步骤，导致解构时返回undefined。

修正后的服务端路由代码 #

import { NextResponse } from "next/server";

export async function GET() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await res.json();
  const post = data.slice(0, 5);

  return NextResponse.json({ data: post });
}

export async function POST(request) {
  // 先解析请求体
  const { title, body, userId } = await request.json();
  console.log({ title, body, userId });

  const fetchResponse = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
    body: JSON.stringify({ title, body, userId }),
  });

  const data = await fetchResponse.json();
  console.log(data);
  return NextResponse.json(data);
}

客户端组件的优化建议（可选） #

你当前混合使用了async/await和.then()，可以统一代码风格并添加错误捕获，提升可读性和健壮性：

"use client";

import { useState } from "react";

const Postapost = () => {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");

  const handlePost = async () => {
    const userId = 1;
    const fullPost = { title, body, userId };
    console.log(fullPost);

    try {
      const response = await fetch("http://localhost:3000/api", {
        method: "POST",
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
        body: JSON.stringify(fullPost),
      });
      const json = await response.json();
      console.log(json);
    } catch (error) {
      console.error("请求失败:", error);
    }
  };

  return (
    <div>
      <input
        type="text"
        name="title"
        onChange={(e) => setTitle(e.target.value)}
      />
      <input
        type="text"
        name="body"
        onChange={(e) => setBody(e.target.value)}
      />
      <button onClick={handlePost}>add post</button>
    </div>
  );
};

export default Postapost;

关键修改点总结 #

• 服务端POST路由添加await request.json()解析请求体
• 移除服务端POST函数中未使用的response参数
• 客户端组件统一使用async/await并添加错误捕获（可选）

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