在 Next.js 13 的 App Router 中，Server Actions 不支持直接调用 res.send() 等 HTTP 响应方法；正确方式是通过 return 返回结构化数据，由客户端组件 await 捕获结果。
在 next.js 13 的 app router 中，server actions 不支持直接调用 `res.send()` 等 http 响应方法；正确方式是通过 `return` 返回结构化数据，由客户端组件 `await` 捕获结果。
Next.js 13 引入的 Server Actions 是一种在服务端执行、与客户端无缝集成的数据操作机制。它不是传统意义上的 API 路由，因此不提供 req/res 对象，也不允许使用 Express 或 Node.js 原生响应方法（如 res.json() 或 res.send()）。试图在 Server Action 中访问 res 会导致运行时错误——该变量根本不存在。
✅ 正确做法：显式 return 一个 JavaScript 值（对象、字符串、布尔值等），该值将被序列化后安全地传回客户端组件：
// app/actions/create-foo-action.js
'use server';
import { connectDB } from '@utils/database';
import { User } from '@models/user';
export async function createFoo(foo) {
try {
await connectDB();
await User.create(foo);
return { success: true, title: 'OK', data: foo };
} catch (err) {
console.error('Failed to create user:', err);
return {
success: false,
title: 'Error',
message: err.message || 'Unknown error occurred'
};
}
}⚠️ 注意事项：
- 必须添加 'use server'; 指令（首行），否则 Next.js 不会将其识别为 Server Action；
- 函数必须定义在 app/ 目录下（推荐放在 app/actions/ 子目录），且不能位于客户端组件内部；
- 返回值需为可序列化的纯 JSON 数据（不支持 Date、Map、Function 等）；
- 错误不应靠 throw 向上冒泡来“传递状态”——虽然可捕获异常，但统一 return 错误对象更利于客户端逻辑处理（避免 try/catch 嵌套）。
在客户端组件中调用时，需确保组件标记为 Client Component（即包含 'use client';），并使用 async/await 处理返回值：
// app/page.tsx
'use client';
import { useState } from 'react';
import { createFoo } from '@/actions/create-foo-action';
export default function CreateForm() {
const [status, setStatus] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const foo = {
name: formData.get('name'),
email: formData.get('email')
};
const result = await createFoo(foo);
setStatus(result);
if (result.success) {
alert('✅ User created successfully!');
e.target.reset();
}
};
return (
<form onSubmit={handleSubmit}>
<input name="name" placeholder="Name" required />
<input name="email" type="email" placeholder="Email" required />
<button type="submit">Create User</button>
{status && (
<p className={status.success ? 'text-green-600' : 'text-red-600'}>
{status.title}: {status.message}
</p>
)}
</form>
);
}? 进阶提示：若需重定向、设置 Cookie 或访问请求上下文（如 headers、cookies），Server Actions 提供了专用辅助函数：
- redirect()（来自 next/navigation）用于服务端跳转；
- cookies() / headers()（来自 next/headers）用于读取请求头或 Cookie；
- revalidatePath() 或 revalidateTag() 可触发缓存更新。
总结：Server Actions 的设计哲学是「以函数为中心」而非「以 HTTP 协议为中心」。它消除了手动构造 API 接口的样板代码，让数据提交更简洁、类型更安全、安全性更高（自动绑定 CSRF 保护）。只要牢记 “返回值即响应” 这一核心原则，并合理组织服务端逻辑与客户端反馈，就能高效构建健壮的表单与交互流程。
