How to Create Form in Next JS with React Hook Form: React Tutorial

#react #nextjs #webdev #tutorial

Creating a form from scratch without any libraries was easy in React. But, handling the logic was extremely difficult when you start validating directly in the frontend or send requests to the server.

You can create and handle forms in an elegant way with React Hooks. For your information, React Hooks was introduced in React 16.8. By using Hooks, it gives developers a new pattern to make code more reusable.

Instead of reinventing the wheel by writing your own hooks, you should use React Hook Form. As the name indicates, it uses React Hooks to build form and 100% compatible with NextJS.

Install React Hook Form dependency

Before starting anything, you need to install React Hook Form as a dependency with the following command:

npm install react-hook-form

In your pages folder from Next JS framework, you can import this new library in your React code:

import { useForm } from 'react-hook-form';

Create a newsletter sign up form

After importing React Hook Form, we need to create the visual part of the form. In our example, we'll build an easy newsletter subscription form. Here is the starting point:

export default function Index() {
  return (
    <form>
      <input name="email" />

      <input type="submit" />
    </form>
  );
}

Nothing fancy, it's just a classic form in React with one input for email and another input for submitting the form.

Form error management

Then, we need to connect the input to React Hook Form by using register method provided by the library.

import { useForm } from "react-hook-form";

export default function Index() {
  const { register } = useForm();
  ...
  <input name="email" ref={register({ required: true })} />
  ...

In register method, we also add required: true. As its name suggested, the user can't leave the input empty when he submits the form.

After registering the input, we need to display an error message when the user doesn't fill the form. The good news React Hook Form also provides errors object to handle form errors.

export default function Index() {
  const { register, errors } = useForm();
  ...
  <input name="email" ref={register({ required: true })} />
  {errors.email && <span>The email is required</span>}
  ...

Handle the form logic

As you may notice, nothing happens when you start submitting the form. So, we need to implement the validation process. When everything is correct, we also need to retrieve the user email and send it to your backend (or do what you need to do based on your need).

handleSubmit method needs to be used for validating forms in React Hook Form. handleSubmit takes as his first argument the callback when the form is correctly filled by the user. Here is an example of how to use handleSubmit method:

export default function Home() {
  const { handleSubmit, register, errors } = useForm();
  const onSubmit = (data: any) => console.log(`Email input value: ${data.email}`);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
  ...

You have to replace console.log method based on your requirement. For example, you can call a backend server with data from the form filled by the user.

In conclusion

Finally, you can find the complete source code here:

import { useForm } from 'react-hook-form';

export default function Home() {
  const { handleSubmit, register, errors } = useForm();
  const onSubmit = (data: any) => console.dir(`Email input value: ${data.email}`);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="email" ref={register({ required: true })} />

      {errors.email && <span>This email is required</span>}

      <input type="submit" />
    </form>
  );
}

As you can see, with React Hook From library, it makes form handling so easy. You can now make a form in NextJS and in React with only a few lines of code.

Next JS Templates and Themes

Checkout our Next JS templates and themes that you can use for your React project. Built on top of Tailwind CSS, the templates use modern code pattern like component and UI blocks. You can also browse my portfolio:

Easy to modify and customize, you can change the themes based on your needs. It saves you development and design time.