Skip to content

examples: add with-zod-form-action - #97006

Open
Vish05 wants to merge 1 commit into
vercel:canaryfrom
Vish05:add-zod-form-action-example
Open

examples: add with-zod-form-action#97006
Vish05 wants to merge 1 commit into
vercel:canaryfrom
Vish05:add-zod-form-action-example

Conversation

@Vish05

@Vish05 Vish05 commented Aug 10, 2026

Copy link
Copy Markdown

What?

Adds a new example (examples/with-zod-form-action) demonstrating React 19's useActionState combined with Zod validation via the zod-form-action package.

Why?

Validating useActionState forms with Zod currently means repeating the same safeParse() / flatten().fieldErrors boilerplate in every Server Action, and it's easy to get subtle things wrong — like accidentally swallowing a redirect() call inside a try/catch, or silently dropping cross-field (object-level .refine()) validation errors. This example demonstrates a working pattern that handles both cases correctly, alongside standard field-level validation.

How?

The example is a standard create-next-app (App Router) project that includes:

  • A Server Action using zodAction() for schema validation
  • A client form reading typed field errors and form-level errors via fieldError() / formError()
  • A redirect() call on successful submission, verified to fire correctly (not swallowed by internal error handling) after validation passes

Tested locally with npm run dev — field validation, form-level (cross-field) validation, and the post-success redirect were all confirmed working.

N/A — this PR adds a new example, not a documentation fix, bug fix, or new feature, so the corresponding checklists above don't apply.

Signed commits: commits are SSH-signed (git config gpg.format ssh).

Closes NEXT-
Fixes #

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant