safe-action-forms

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";