Next.js Discord

Discord Forum

NextJS/Prisma/Better-Auth - Best way to handle forms

Unanswered
Great Skua posted this in #help-forum
Open in Discord
Great SkuaOP
Hey,

I'm creating my first project, which is going to be big with a lot of data.
Currently I use server actions, with <form action="">

What is the best way to handle the forms with the errors loading etc?
I heard about zod for backend with data validation. I have no idea where to start, I just have tables, simple create / get functions as server actions.

I'm looking for the current "meta" or most used/popular technologies.

Thanks for help!

1 Reply

Cinnamon Teal
If you are only doing backend validation you can use Zod to validate the data inside the server action and return any errors to the client.

On the client you can use useActionState to handle the response from the server action. https://react.dev/reference/react/useActionState

You will need to manage the focus for the error fields, and necessary aria attributes yourself, based on how you create the components.

You also have form libraries like React Hook Form if you like, which will handle the form state and focus for error fields. Though, you can also simply rely on native browser validation for the client side if the forms are simple.

GET functions shouldn't be server actions though. Server actions are for POST requests. GET requests are usually called from server components.

I'm creating my first project, which is going to be big with a lot of data.
Honestly, if it's the first project I would suggest starting with an extremely simple project with not much data. Easy to play around and understand lot of things that way.

Also Next.js docs are great: https://nextjs.org/docs

If you read through the getting started section you will get to know about lot of standard patterns.