分享发现 我用 Next.js Server Actions 省掉了 80% 的 API 代码

huo · May 13, 2026 · 15 hits

独立开发,代码越少,bug 越少。

之前做一个小工具站,前后端通信写了几十个 API 路由,维护起来头大。 后来直接上 Next.js Server Actions,代码量砍了八成。 之前(传统 API):

typescript // app/api/update-profile/route.ts export async function POST(req: Request) { const body = await req.json() // 校验、鉴权、操作数据库... return Response.json({ success: true }) }

// 前端还要写 fetch 封装、错误处理、类型定义...

现在(Server Actions): typescript // app/actions.ts 'use server'

export async function updateProfile(data: ProfileFormData) { // 直接写在这里,自动鉴权、类型安全、前后端共享 await db.user.update({ where: { id: data.id }, data }) revalidatePath('/profile') }

前端直接调用,像调用本地函数: typescript import { updateProfile } from './actions'

// 一行代码,自带类型提示和错误处理 await updateProfile(formData)

三个实际好处:

  1. 不用写 API 路由文件 —— 少一层抽象,少一堆 bug
  2. 类型自动共享 —— 改参数名,前端编译直接报错
  3. 天然防 CSRF —— Next.js 自动处理,不用手动带 token

一个坑: Server Actions 默认 1MB 请求体限制,传大图要改配置或走单独上传接口。

适合场景:

后台管理、表单提交、数据 CRUD

独立开发的小产品,不需要复杂微服务架构 不适合:大文件上传、需要流式响应、跨语言调用。 我用这套重构了一个 SaaS 后台,两天删了 2000 行代码。 你们用 Server Actions 踩过什么坑?

No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.