examples: add with-zod-form-action - #97006
Open
Vish05 wants to merge 1 commit into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Adds a new example (
examples/with-zod-form-action) demonstrating React 19'suseActionStatecombined with Zod validation via thezod-form-actionpackage.Why?
Validating
useActionStateforms with Zod currently means repeating the samesafeParse()/flatten().fieldErrorsboilerplate in every Server Action, and it's easy to get subtle things wrong — like accidentally swallowing aredirect()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:zodAction()for schema validationfieldError()/formError()redirect()call on successful submission, verified to fire correctly (not swallowed by internal error handling) after validation passesTested 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 #