SuperAPI AI 工具集

nextjs-server-actions

编程与开发

查看项目

更新于 10-16 05:54

技能介绍

用途:在 Next.js App Router 项目中实现安全的服务端 Server Actions,用于 mutations、表单处理与乐观 UI。若项目使用 pages/ 目录而非 App Router,应完全忽略此技能。

主要能力与做法:在 actions.ts 中以 'use server' 定义 action;处理存储或调用服务前先用 schema 解析输入,例如 z.object({ ... }).safeParse(...) 或 formData.get('title') 转为已验证结构;在 action 内部完成授权,仅靠 middleware 不够;将逻辑委托给 DAL/service 层,避免在路由 UI 文件中暴露存储细节;对本次 mutation 所属的 tag 或 path 执行精确 revalidate;按需使用 useFormStatus、useActionState、useTransition 或 useOptimistic 暴露 pending 与乐观状态。典型表单写法为 <form action={createPost}> 或 <form action={action}>,在提交子组件内使用 useFormStatus() 与 disabled={pending}。

校验清单:action 处理前验证 FormData 或参数;在服务端函数内完成身份认证与授权;mutation 调用 DAL/service 代码,而非从组件直接操作原始存储;成功路径执行 tag 或 path 的 revalidate;正确处理 redirect 或抛出的错误。

反模式:不校验 Server Action 输入(应始终用 Zod 校验后再处理);跳过鉴权检查(应在每个 action 内验证 session/user,而非 middleware);在组件内定义 action(应放在 actions.ts 以避免闭包问题);在 try/catch 中使用 redirect()(redirect() 会抛错,捕获会抑制重定向)。

限制:资料仅说明适用于 App Router,pages/ 目录项目不适用;未提供具体安装命令、依赖版本、收费或平台信息。