Using Zod Form Validation and Server Actions in NextJs with useFormState Hook

We’ll cover everything from adding items to the cart, initiating checkout, and submitting forms, with zod validation on the server side.

Key Points:

- Form Data Handling: Understand how to use the FormData API to capture and manipulate form inputs.

- Zod for Validation: Explore how to leverage Zod to validate form data on the server side and handle errors gracefully.

- Integration with Strapi: See how Strapi, a headless CMS, manages content and stores data for our application.

- Error Handling and User Experience: Learn how to provide feedback to users when they submit forms with incomplete or incorrect information.

- React Hooks: Discover how to use the useFormState hook to maintain the form state and handle server responses efficiently.

So what are you waiting for, let'e learn about Using React useStateForm and learn about, Zod validation and server actions in NextJs.

[adomakins]

Thank you for the video!

Forms feel so complicated and you broke it down super simply which was awesome

[noobboiii]

Hey I have question can we deploy Strapi cms in Hostinger VPS server?

[MaximeOnDev]

Hey, nice video! But wouldn’t it be better to have both client-side and server-side validation? Right now, when a field is empty and you submit, we have to wait for the server response to get the error and make a useless POST request. If we also implement the Zod check on the client side, we would get the error immediately without waiting for the server response

[adamovicslobodan]

I have an issue when I disable JS in the browser. I call the action, it is handled inside the server function, and when I send data to the Strapi, once I refresh the page ( still JS is disabled ), it again sends the data to the Strapi. How to prevent sending same formData again and again to the Strapi from the server-side?

[kennethlau]

Can we have a github link for this ? Perhaps an example code that reflects this. Thanks