在Next.js Server Actions中返回自定义状态码与错误消息的实现问题

我明白你的困扰——在Next.js Server Actions里，直接返回错误对象会被当成成功响应（200状态码），用NextResponse又会触发序列化错误，确实有点绕。咱们一步步解决这个问题：

核心问题分析 #

1. 直接返回对象≠错误响应：Server Actions默认会把返回的任何值当作成功数据，所以哪怕你返回{code:400, message:"User already exists"}，客户端收到的还是200状态，不会进入catch块。
2. NextResponse不能在Server Actions里返回：它是类实例，不符合Server Actions向客户端组件传递数据的规则（只能传普通对象、内置类型，不能传类或空原型对象），这就是你看到控制台错误的原因。

正确实现方案 #

我们需要通过抛出可序列化的自定义错误来让客户端捕获，同时带上自定义状态码和消息：

1. 修改Server Action逻辑

把错误处理改成抛出普通对象（而非类实例），确保能被正常序列化：

"use server";
import { connectToDB } from "@/lib/mongodb";
import User from "@/lib/mongodb/models/User";
import * as bcrypt from "bcryptjs";

export async function registerUser(formData) {
  try {
    await connectToDB();

    // 检查邮箱是否已存在
    const existingUser = await User.findOne({ email: formData.get("email") });
    if (existingUser) {
      // 抛出包含自定义状态码和消息的普通对象
      throw {
        statusCode: 400,
        message: "User already exists"
      };
    }

    // 正常注册逻辑
    const hashedPassword = await bcrypt.hash(formData.get("password"), 10);
    await User.create({
      email: formData.get("email"),
      password: hashedPassword
      // 其他用户字段...
    });

    // 返回成功信息
    return {
      success: true,
      message: "Registration successful!"
    };
  } catch (error) {
    // 统一处理其他未知错误
    throw {
      statusCode: error.statusCode || 500,
      message: error.message || "Something went wrong during registration"
    };
  }
}

2. 客户端捕获并处理错误

在客户端组件里，用try/catch捕获Server Action抛出的错误，然后展示提示：

'use client';
import { registerUser } from '@/actions/register'; // 替换成你的Server Action路径

export default function RegisterForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);

    try {
      const result = await registerUser(formData);
      // 注册成功的处理
      alert(result.message);
      // 可以重置表单或跳转到登录页
      e.target.reset();
    } catch (error) {
      // 捕获自定义错误并展示
      alert(`Error: ${error.message} (Status Code: ${error.statusCode})`);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" required />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input type="password" id="password" name="password" required />
      </div>
      <button type="submit" className="btn">Register</button>
    </form>
  );
}

关键注意事项 #

• 必须抛出错误才能触发客户端catch：Server Actions只有在抛出异常时，才会让客户端进入catch块，返回的任何值都会被视为成功响应。
• 只抛出可序列化的数据：确保抛出的是普通对象（不要包含类实例、函数等），不然会再次触发序列化错误。
• 统一错误处理：在catch块里兜底处理未知错误，避免客户端收到不明确的提示。

备注：内容来源于stack exchange，提问作者user17902954