从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 + 页面） | 单文件搞定 |
🎯 适用场景：用户注册、评论提交、点赞、设置偏好等页面级操作。
三、实战例子：实现一个“留言提交”功能
我们将创建一个页面，用户输入名字和留言，点击提交后保存到内存（模拟数据库），