如何使用NextRequest和NextResponse处理并转发POST请求？Next.js 13服务端解析问题

错误原因 #

• 服务端POST函数未接收NextRequest实例参数，直接访问NextRequest.body是错误用法，NextRequest是类，需使用当前请求的实例来获取body。
• 未通过请求实例的json()方法解析JSON格式的请求体。
• 存在拼写错误：STRIPE_SECRETE_KEY应为STRIPE_SECRET_KEY。

修正后的服务端代码 #

import { NextRequest, NextResponse } from "next/server";
import Stripe from "stripe";

// 修正密钥名称拼写
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

// 接收当前请求实例作为参数
export async function POST(request: NextRequest) {
  // 解析JSON请求体
  const { email } = await request.json();

  if (!email) {
    return NextResponse.json({ error: "邮箱参数必填" }, { status: 400 });
  }

  const customer = await stripe.customers.create({
    email: email,
  });

  return NextResponse.json({ customer });
}

客户端代码优化（可选） #

添加错误处理逻辑，避免请求失败时无提示：

const redirectToCheckout = async () => {
  try {
    const response = await fetch("/api/stripe", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ email: change }),
    });

    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("操作出错：", error);
  }
};

核心步骤：解析客户端请求体→构造转发请求→返回外部API响应。

基础转发示例 #

import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  // 1. 解析客户端请求体
  const requestBody = await request.json();

  // 2. 向外部API发起请求
  const externalResponse = await fetch("https://external-api.example.com/target-endpoint", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // 若外部API需要认证，添加对应Header
      // "Authorization": `Bearer ${process.env.EXTERNAL_API_TOKEN}`
    },
    body: JSON.stringify(requestBody), // 直接转发客户端请求体，也可按需修改
  });

  // 3. 将外部API的响应返回给客户端
  const externalData = await externalResponse.json();
  return NextResponse.json(externalData, { status: externalResponse.status });
}

转发请求Header的示例 #

如果需要保留客户端的请求Header（如Cookie、自定义标识），可从request.headers提取后添加到转发请求：

import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  // 复制客户端Header，移除不需要转发的字段（如host）
  const forwardHeaders = new Headers(request.headers);
  forwardHeaders.delete("host");

  // 直接转发原始请求体（不解析，适用于不确定内容类型的场景）
  const requestBody = await request.text();

  const externalResponse = await fetch("https://external-api.example.com/target-endpoint", {
    method: "POST",
    headers: forwardHeaders,
    body: requestBody,
  });

  // 复制外部API的响应Header并返回
  const responseHeaders = new Headers(externalResponse.headers);
  const externalData = await externalResponse.json();
  return NextResponse.json(externalData, {
    status: externalResponse.status,
    headers: responseHeaders,
  });
}

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