safe-action-forms
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";
More from next-safe-action/skills
safe-action-advanced
Use when working with bind arguments, metadata schemas, framework errors (redirect/notFound/forbidden/unauthorized), type inference utilities (InferSafeActionFnInput/Result), or server-level action callbacks
568safe-action-client
Use when creating or configuring a next-safe-action client, defining actions with input/output validation, handling server errors, or setting up createSafeActionClient with Standard Schema (Zod, Yup, Valibot)
562safe-action-hooks
Use when executing next-safe-action actions from React client components -- useAction, useOptimisticAction, handling status/callbacks (onSuccess/onError/onSettled), execute vs executeAsync, or optimistic UI updates
560safe-action-validation-errors
Use when working with validation errors -- returnValidationErrors, formatted vs flattened shapes, custom validation error shapes, throwValidationErrors, or displaying field-level and form-level errors
558safe-action-middleware
Use when implementing middleware for next-safe-action -- authentication, authorization, logging, rate limiting, error interception, context extension, or creating standalone reusable middleware with createMiddleware() or createValidatedMiddleware(). Covers both use() (pre-validation) and useValidated() (post-validation) middleware.
556safe-action-testing
Use when writing tests for next-safe-action actions or hooks -- Vitest patterns for testing server actions directly, middleware behavior, hooks with React Testing Library, validation errors, and server errors
532