Next.js14 App Router中req.json报错及组件传值问题咨询

1. req.json is not a function 错误原因及修复 #

这个错误源于你的API路由写法不符合Next.js 14 App Router的规范：

• 导出方式错误：App Router的API路由必须使用命名导出（如export async function POST），不能用默认导出。
• 未异步解析请求体：req.json()是异步方法，必须添加await才能拿到解析后的JSON数据。
• 多余的res参数：App Router的路由处理器不需要res参数，直接返回NextResponse即可。

修正后的后端代码 #

import { NextResponse } from "next/server";
import User from "../../models/post";

export async function POST(req) { // 改为命名导出，仅接收req参数
    try {
        const body = await req.json(); // 添加await解析请求体
        console.log(req);
        const userData = {
            Title: body.title,
            content: body.content,
            tag: body.tag,
            time: new Date() 
        };

        // 此处可添加数据库保存逻辑，例如：
        // await User.create(userData);

        return NextResponse.json({ message: "User posted successfully" }, { status: 200 });
    } catch (error) {
        console.error("Error occurred while saving user data:", error);
        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
    }
}

2. Server Components 对象传递限制错误原因 #

你提到仅返回简单消息，但这个错误并非来自API响应，而是代码中其他环节导致：

• Next.js禁止从Server Component向Client Component传递非普通对象（比如Mongoose文档实例、类对象、无原型对象）。
• 比如你在Server Component中获取了Mongoose查询返回的文档（不是纯JSON对象），并直接传递给Client Component，就会触发该错误。

修复方案 #

若需传递这类对象，先转换为普通对象：

• 对于Mongoose文档，使用.toObject()方法：const plainUser = savedUser.toObject();
• 通用方法：通过JSON.parse(JSON.stringify(obj))序列化再反序列化，得到纯普通对象。

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