React Hook Form: Client & Server Validation with Zod in Next.js

In this tutorial, we’re going step by step through setting up React Hook Form (RHF) with Zod for client-side and server-side validation in a Next.js app. If you’ve been struggling with form validation, handling errors properly, or integrating validation between the client and server, this guide has you covered.

Setting Up Dependencies
Before writing any code, we install everything needed: react-hook-form, zod, and @hookform/resolvers to connect them. This setup ensures that we can leverage schema-based validation while keeping our forms lightweight and performant.

Creating a Schema for Our Form
Zod lets us define a strong validation schema with clear rules. We set up fields for a contact form, ensuring that data like name, email, and message meet our requirements. The goal is to enforce these rules on the client-side first, preventing unnecessary server requests with bad data.

Building the Form
We start by structuring the form in React, setting up input fields and the necessary markup before connecting them to React Hook Form. The form itself is simple, but integrating validation will make it powerful.

Integrating React Hook Form
Next, we bring in React Hook Form by initializing the useForm hook. This allows us to track form state, handle submissions, and manage validation. The register function connects each input to RHF so that it can manage values, validation, and errors seamlessly.

Displaying Validation Errors
Instead of just logging errors to the console, we display validation messages directly under each field, making it clear to users what needs to be fixed. This improves the user experience and prevents frustration when submitting forms with incorrect data.

Handling Form Submission and Server Actions
Once validation is working on the client side, we move to the server-side validation using Next.js server actions. This step is crucial because client-side validation isn’t enough—malicious users can still send bad data directly to the server.

We process the form submission, validate the input again using Zod on the backend, and handle errors properly. If there’s an issue, we send validation errors back to the client, ensuring they are displayed just like client-side errors. If everything checks out, we proceed with storing or processing the data.

By the end of this tutorial, you’ll know how to fully integrate React Hook Form with Zod, ensuring your forms are robust, validated on both the client and the server, and user-friendly.

Let’s get started. 🚀

00:00 React Hook Form: Client & Server Validation with Zod in Next.js
00:16 Setting up dependencies
00:49 Creating a schema for our form
02:18 Creating the form
03:42 Add the useForm Hook
05:04 Connecting inputs to hook with register
06:20 Show Validation Errors Below Each Input
07:02 onSubmit function and Server Action