safe-action-forms
Installation
SKILL.md
next-safe-action Form Integration
Options
| Approach | When to Use |
|---|---|
useAction + native form |
Simple forms, no complex validation UI, programmatic triggers |
useStateAction + <form action={formAction}> |
Forms with state tracking, need prevResult access, full callbacks |
useHookFormAction (RHF adapter) |
Complex forms with field-level errors, validation on change/blur |
useHookFormOptimisticAction |
RHF forms with optimistic UI updates |
Quick Start — useStateAction Form
"use client";
import { useStateAction } from "next-safe-action/hooks";
import { submitContact } from "@/app/actions";