SuperAPI AI 工具集

nextjs-tanstack-form

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:在 Next.js 16 项目中使用 TanStack Form v1 构建类型安全、性能良好的表单,适合复杂校验、Server Actions 提交、多步向导、动态字段数组和实时异步校验(如用户名可用性)等场景。

主要能力:覆盖 Field API(状态与处理器)、校验时机(onChange/onBlur/onSubmit/onServer)、动态字段数组与多步向导、防抖异步校验,以及 shadcn/ui 字段组合。支持 Standard Schema(Zod、Valibot 等)做 schema 优先校验,无需适配器;基于信号的状态更新可减少重渲染;提供 DeepKeys、DeepValue 的 TypeScript 推断;原生集成 Next.js 16 Server Actions;无头设计,可搭配任意 UI 库。

使用方式:先定义 Zod schema 与共享的 formOptions,在客户端与服务端复用;客户端用 useActionState 配合 mergeForm 合并服务端错误,服务端在 Server Action 中用 createServerValidate 与 ServerValidateError 做校验,数据库检查放在 onServerValidate。文件按 SOLID 组织,如 form-options.ts(共享配置与 schema)、FormComponent.tsx(客户端表单 UI)、form.action.ts(服务端 Action)、form.interface.ts(类型)。异步校验可用 asyncDebounceMs 防抖,提交状态可用 form.Subscribe 做选择性重渲染。

适用场景:需要复杂校验、Server Actions 集成、多步向导或动态字段数组的 Next.js 应用。

限制:资料未提供具体安装命令、版本兼容细节、收费与价格信息;文中提及的 agent 工作流与参考文档清单属于该技能自身说明,实际使用需以官方文档为准。该技能为 Next.js Server Actions 变体,纯 React 应用应参考 react-forms 技能。