实用指南：从0死磕全栈之Next.js Server Actions 入门实战：在服务端安全执行逻辑，告别 API 路由！

半米日暮

在 Next.js 13.4+ 中，官方正式推出Server Actions（服务端函数）功能，让你无需编写 API 路由，就能直接在服务端处理表单提交、数据库操作等逻辑。本文利用一个简单的“留言提交”例子，带你迅速掌握 Server Actions 的用法、优势和最佳实践。

---

Server Actions？就是一、什么

Server Actions是 Next.js 提供的一种新机制，允许你在服务端组件中定义函数，并依据客户端（如表单）直接调用它，而无需创建单独的 /api 路由。

核心特点：

• ✅ 函数在服务端执行（安全！）
• ✅ 自动处理 CSRF 保护
• ✅ 支持 async/await
• ✅ 与 React 表单天然集成
• ✅ 自动序列化参数（拥护对象、数组等）

为就是 它不是替代 API 路由，而简单、私有、页面专属的逻辑提供更简洁的方案。

---

server action的概念其实来自于React的server function，指的是​​运行在服务器端的函数​​，通常用于处理业务逻辑、访问数据库、执行权限校验，Server Function 是一个通用术语，泛指任何运行在服务端的函数。

server action是 Server Function 的一种​​特定用法​​：​​专门用于处理表单提交、按钮点击等用户交互触发的异步操作​​.一个函数如果被标记为 ​​action​​（比如通过 action={myAction}传递），或者从一个 action函数内部调用，那么它就被称为 ​​Server Action​​。

二、为什么用 Server Actions？ vs 传统 API 路由

场景	传统 API 路由	Server Actions
表单提交	需写 /api/submit + fetch	直接调用函数，无需 fetch
数据验证	在 API 文件中处理	在函数内直接处理
错误反馈	需解析 JSON 响应	直接抛出错误，自动捕获
安全性	需手动防 CSRF	自动内置保护
代码量	多文件（API + 页面）	单文件搞定

适用场景：用户注册、评论提交、点赞、设置偏好等页面级操作。

---

三、实战例子：实现一个“留言提交”机制

我们将创建一个页面，用户输入名字和留言，点击提交后保存到内存（模拟数据库），

来源：https://www.cnblogs.com/gccbuaa/p/19177879