Next.js14 App Router中获取req.body返回ReadableStream问题

在Next.js 14.0.4的App Router中编写POST类型API路由时，直接访问req.body会得到ReadableStream对象，而非预期的JSON数据。

原代码示例 #

// src/app/api/posts/route.js
export async function POST(req, res) {
    console.log('Post request received');
    console.log(req.body);

    return Response.json({
        "success": true,
        "data": req.body,
        "message": "Fetched successfully"
    });
}

预期控制台输出 #

{'title':'test blog'}

实际控制台输出 #

ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

问题原因 #

Next.js App Router的API路由采用Web标准的Request对象，其body属性本身是ReadableStream类型，无法直接获取JSON数据，必须通过异步方法解析。

解决方案 #

使用req.json()异步方法读取并解析请求体，需添加await关键字等待解析完成。

修改后的代码示例 #

// src/app/api/posts/route.js
export async function POST(req) {
    console.log('Post request received');
    // 异步解析请求体为JSON
    const body = await req.json();
    console.log(body);

    return Response.json({
        "success": true,
        "data": body,
        "message": "Fetched successfully"
    });
}

说明 #

• req.json()会读取整个请求体流并解析为JSON对象，属于异步操作，必须用await等待结果。
• App Router的API路由不需要res参数，直接返回Response对象即可。

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