SuperAPI AI 工具集

nextjs-server-actions

前端与建站

查看项目

更新于 10-15 20:31

技能介绍

用途:在 Next.js App Router 中实现服务端数据变更(Server Actions)。Action 是由 form 或 startTransition 调用的服务端变更,不能替代 GET 读取;读取应使用 Server Components 或 loaders。

主要能力:使用 "use server" 定义可导入的变更函数;配合 <form action> 实现渐进增强;用 useActionState 回传校验/领域错误,useFormStatus 处理 pending;在服务端用 schema(如 Zod)校验 FormData 或对象;写入后调用 revalidatePath / revalidateTag / updateTag;用 redirect 跳转。

组织方式:按 features/<域>/ 放置 actions.ts、schemas.ts、components/。一个 action 对应一个业务意图(如 createOrder),I/O 抽到 services,action 负责 validate → authz → mutate → revalidate。

必要用法:action 签名在配合 useActionState 时为 (prevState, formData),否则为 (formData) 或显式参数;redirect() 会抛出,之后不要再 return;额外参数用 .bind(null, id),但 id 仍需重新校验归属。返回可序列化结果,如 { ok: true, data } 或 { ok: false, code, message }。

限制与注意:客户端类型不是保证,必须在服务端校验;authn/authz 要在 action 内完成;不要返回完整数据库实体(哈希、令牌、PII);不要用 action 做读取或 searchParams;避免无 revalidate 的写入;不要无谓调用 cookies()/headers() 以免路由转为动态;意外错误应记录并交给 error boundary,不向客户端泄露堆栈。安全细节见 nextjs-server-actions-security,架构见 nextjs-architecture。