实用指南：从0死磕全栈之Next.js Server Actions 入门实战：在服务端安全执行逻辑，告别 API 路由！
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style>
<div class="markdown_views prism-atom-one-dark" id="content_views"><svg style="display: none" xmlns="http://www.w3.org/2000/svg"><path d="M5,0 0,2.5 5,5z" id="raphael-marker-block" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path></svg><blockquote><p>在 Next.js 13.4+ 中，官方正式推出<strong>Server Actions</strong>（服务端函数）功能，让你无需编写 API 路由，就能直接在服务端处理表单提交、数据库操作等逻辑。本文利用一个简单的“留言提交”例子，带你迅速掌握 Server Actions 的用法、优势和最佳实践。</p></blockquote><hr><h3> Server Actions？就是一、什么</h3><p><strong>Server Actions</strong>是 Next.js 提供的一种新机制，允许你在<strong>服务端组件中定义函数</strong>，并依据客户端（如表单）直接调用它，而<strong>无需创建单独的 <code>/api</code> 路由</strong>。</p><h4>核心特点：</h4><ul><li>✅ 函数在<strong>服务端执行</strong>（安全！）</li><li>✅ 自动处理 CSRF 保护</li><li>✅ 支持 <code>async/await</code></li><li>✅ 与 React 表单天然集成</li><li>✅ 自动序列化参数（拥护对象、数组等）</li></ul><blockquote><p>为就是 它不是替代 API 路由，而<strong>简单、私有、页面专属</strong>的逻辑提供更简洁的方案。</p></blockquote><hr><p>server action的概念其实来自于React的server function，指的是运行在服务器端的函数，通常用于处理业务逻辑、访问数据库、执行权限校验，Server Function 是一个通用术语，泛指任何运行在服务端的函数。</p><p>server action是 Server Function 的一种特定用法：专门用于处理表单提交、按钮点击等用户交互触发的异步操作.一个函数如果被标记为 action（比如通过 action={myAction}传递），或者从一个 action函数内部调用，那么它就被称为 Server Action。</p><h3>二、为什么用 Server Actions？ vs 传统 API 路由</h3><table><thead><tr><th>场景</th><th>传统 API 路由</th><th>Server Actions</th></tr></thead><tbody><tr><td>表单提交</td><td>需写 <code>/api/submit</code> + fetch</td><td>直接调用函数，无需 fetch</td></tr><tr><td>数据验证</td><td>在 API 文件中处理</td><td>在函数内直接处理</td></tr><tr><td>错误反馈</td><td>需解析 JSON 响应</td><td>直接抛出错误，自动捕获</td></tr><tr><td>安全性</td><td>需手动防 CSRF</td><td>自动内置保护</td></tr><tr><td>代码量</td><td>多文件（API + 页面）</td><td>单文件搞定</td></tr></tbody></table><blockquote><p> 适用场景：用户注册、评论提交、点赞、设置偏好等<strong>页面级操作</strong>。</p></blockquote><hr><h3>三、实战例子：实现一个“留言提交”机制</h3><p>我们将创建一个页面，用户输入名字和留言，点击提交后保存到内存（模拟数据库），</p></div><br><br>
来源：https://www.cnblogs.com/gccbuaa/p/19177879
頁:
[1]