⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Next.js安全表单处理：safe-action-forms集成原生与React Hook Form解决方案

safe-action-forms by next-safe-action/skills

57 周安装量

GitHub

安装命令

npx skills add https://github.com/next-safe-action/skills --skill safe-action-forms

开发 React JavaScript 框架

🇨🇳中文介绍

next-safe-action 表单集成

选项

方式	适用场景
`useAction` + 原生表单	简单表单，无需复杂的验证界面
`useHookFormAction` (RHF 适配器)	具有字段级错误、变更/失焦时验证的复杂表单
`useHookFormOptimisticAction`	需要乐观 UI 更新的 RHF 表单

快速开始 — 原生表单

"use client";

import { useAction } from "next-safe-action/hooks";
import { submitContact } from "@/app/actions";

export function ContactForm() {
  const { execute, result, isPending } = useAction(submitContact);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const fd = new FormData(e.currentTarget);
        execute({
          name: fd.get("name") as string,
          email: fd.get("email") as string,
          message: fd.get("message") as string,
        });
      }}
    >
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />

      {result.validationErrors && (
        <p>{result.validationErrors.email?._errors?.[0]}</p>
      )}
      {result.serverError && <p>{result.serverError}</p>}
      {result.data && <p>Message sent!</p>}

      <button type="submit" disabled={isPending}>
        {isPending ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

949,000 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

302,300 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

242,900 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

172,600 周安装

"use client";

import { useHookFormAction } from "@next-safe-action/adapter-react-hook-form/hooks";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { submitContact } from "@/app/actions";

const schema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email"),
  message: z.string().min(10, "Message must be at least 10 characters"),
});

export function ContactForm() {
  const { form, handleSubmitWithAction, action } = useHookFormAction(
    submitContact,
    zodResolver(schema),
    {
      actionProps: {
        onSuccess: () => toast.success("Message sent!"),
      },
    }
  );

  return (
    <form onSubmit={handleSubmitWithAction}>
      <input {...form.register("name")} />
      {form.formState.errors.name && <p>{form.formState.errors.name.message}</p>}

      <input {...form.register("email")} />
      {form.formState.errors.email && <p>{form.formState.errors.email.message}</p>}

      <textarea {...form.register("message")} />
      {form.formState.errors.message && <p>{form.formState.errors.message.message}</p>}

      {action.result.serverError && <p>{action.result.serverError}</p>}

      <button type="submit" disabled={action.isPending}>
        {action.isPending ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

包	入口点	导出内容
`@next-safe-action/adapter-react-hook-form`	默认	`mapToHookFormErrors`, 类型
`@next-safe-action/adapter-react-hook-form/hooks`	Hooks	`useHookFormAction`, `useHookFormOptimisticAction`, `useHookFormActionErrorMapper`

🇺🇸English

next-safe-action Form Integration

Options

Approach	When to Use
`useAction` + native form	Simple forms, no complex validation UI
`useHookFormAction` (RHF adapter)	Complex forms with field-level errors, validation on change/blur
`useHookFormOptimisticAction`	RHF forms with optimistic UI updates

Quick Start — Native Form

"use client";

import { useAction } from "next-safe-action/hooks";
import { submitContact } from "@/app/actions";

export function ContactForm() {
  const { execute, result, isPending } = useAction(submitContact);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const fd = new FormData(e.currentTarget);
        execute({
          name: fd.get("name") as string,
          email: fd.get("email") as string,
          message: fd.get("message") as string,
        });
      }}
    >
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />

      {result.validationErrors && (
        <p>{result.validationErrors.email?._errors?.[0]}</p>
      )}
      {result.serverError && <p>{result.serverError}</p>}
      {result.data && <p>Message sent!</p>}

      <button type="submit" disabled={isPending}>
        {isPending ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

Quick Start — React Hook Form Adapter

"use client";

import { useHookFormAction } from "@next-safe-action/adapter-react-hook-form/hooks";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { submitContact } from "@/app/actions";

const schema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email"),
  message: z.string().min(10, "Message must be at least 10 characters"),
});

export function ContactForm() {
  const { form, handleSubmitWithAction, action } = useHookFormAction(
    submitContact,
    zodResolver(schema),
    {
      actionProps: {
        onSuccess: () => toast.success("Message sent!"),
      },
    }
  );

  return (
    <form onSubmit={handleSubmitWithAction}>
      <input {...form.register("name")} />
      {form.formState.errors.name && <p>{form.formState.errors.name.message}</p>}

      <input {...form.register("email")} />
      {form.formState.errors.email && <p>{form.formState.errors.email.message}</p>}

      <textarea {...form.register("message")} />
      {form.formState.errors.message && <p>{form.formState.errors.message.message}</p>}

      {action.result.serverError && <p>{action.result.serverError}</p>}

      <button type="submit" disabled={action.isPending}>
        {action.isPending ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

Supporting Docs

Entry Points

Package	Entry Point	Exports
`@next-safe-action/adapter-react-hook-form`	Default	`mapToHookFormErrors`, types
`@next-safe-action/adapter-react-hook-form/hooks`	Hooks	`useHookFormAction`, `useHookFormOptimisticAction`, `useHookFormActionErrorMapper`

Weekly Installs

Repository

next-safe-action/skills

First Seen

Mar 6, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

cursor56

gemini-cli56

amp56

github-copilot56

codex56

kimi-cli56