Next.js Discord

Discord Forum

Handling Errors in Next.js 14 Login Form with Express.js Backend, server action and client side

Unanswered
Dutch Shepherd posted this in #help-forum
Open in Discord
Avatar
Dutch ShepherdOP
Hi, I'm building a login form in Next.js 14 (app router) with an Express.js backend (using Prisma for the database). I initially used a server action with a simple <form action={login} ...> for submission, but I wanted to add client-side validation to provide instant feedback to users, allowing them to quickly see and correct input errors (like missing or invalid fields) without waiting for a server response.

To do this, I implemented Zod for validation and React-hook-form for form handling.

I'm confused about my error-handling strategy, especially the flow between the client and server.

My main questions are:

Am I handling errors efficiently, or are there unnecessary steps in my implementation?

Is using setError in react-hook-form the best way to map errors from the server?

Should I rethink how the client and server handle validation ?

Are there more efficient practices I should follow for server-side validation and error handling with Express.js and Prisma?

Any feedback or suggestions on improving this approach would be greatly appreciated!



My component is now fully client-side.

Here is the relevant code:
Image

1 Reply

Avatar
Jack Herrington has a video on how to implement both validations, server and client using react hook forms, server actions, zod, etc
https://www.youtube.com/watch?v=VLk45JBe8L8