Understanding serverside validation with zod and nextjs server actions???

Hey y'all Im trying to implement zod into my validation for a form and i want to validate on a server action but it's not returning the error for the frontend to use its just breaking the server. Am I using try catch correctly for error handling? Im a bit lost.

What I'm thinking is that its not working because its on a development environment but even then I feel like it should be able to return the error. Also in the nextjs documentation they recommend using use useFormState hook, which I don't fully understand. Furthermore in there documentation they use schema.safeparse instead of using a try catch with the schema.parse.

Im finding server actions super confusing, I feel like using a route handler and returning json would be 100x easier than trying to use this complex abstraction.

Thanks everyone.

The error image shows me trying to put in a bad input into the form and having zod catch it.
Screenshot_2024-01-13_at_10.21.43_AM.png
Screenshot_2024-01-13_at_10.21.58_AM.png
Screenshot_2024-01-13_at_10.28.21_AM.png
Was this page helpful?