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: