Next.js App Router中API路由响应返回与客户端使用方法问询

客户端组件接收响应 #

你的客户端请求代码已经正确，只需在请求完成后调用res.json()解析响应体：

// client component
const res = await fetch('/api/dostuff', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({dataObj: {hey: "ho"}})
    });
// 解析响应JSON
const responseData = await res.json();
// 现在可以使用返回的数据
console.log(responseData);

API路由返回响应 #

Next.js 13 App Router的API路由不再采用Express风格的res.send，而是基于Web标准的Response对象，需要借助NextResponse构造JSON响应：

// route.js in api/dostuff/
import { NextResponse } from 'next/server';

export async function POST(request) {
  const { dataObj } = await request.json();

  // 这里写你的业务逻辑，比如数据处理、数据库操作等
  console.log('接收到的数据:', dataObj);

  // 返回JSON格式响应
  return NextResponse.json({ 
    success: true, 
    message: '数据接收成功',
    receivedData: dataObj 
  });
}

核心差异说明 #

Next.js 12 Pages Router的API用的是Express风格的req/res对象，直接调用res.json()就能返回数据；而13的App Router遵循Web标准的Request/Response规范，必须通过NextResponse.json()来生成响应，客户端也需要用标准fetch API的res.json()解析——这就是你觉得JSON操作混乱的根本原因，适应这套标准API后就会顺畅很多。

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