Next.js & Formik: Build Powerful Forms Easily

Written by

learnmodernjavascript

in

Forms are a fundamental part of almost every web application. From simple contact forms to complex user registration flows, they allow users to interact with your application and provide valuable data. Building and managing forms, however, can quickly become a tedious and error-prone process. This is where libraries like Formik come into play, streamlining form creation and validation in React and, by extension, Next.js. This tutorial will guide you through using Formik in your Next.js projects, empowering you to build robust and user-friendly forms with ease.

Why Formik? The Form-Building Challenge

Before diving into Formik, consider the manual effort involved in building forms without a dedicated library. You’d typically need to:

  • Manage form state (input values, validation errors, submission status).
  • Handle input changes and updates to the form state.
  • Implement validation logic for each field.
  • Provide feedback to the user on validation errors.
  • Handle form submission and data processing.

This can lead to a lot of boilerplate code and potential for bugs. Formik simplifies this process by providing a declarative way to manage form state, handle validation, and submit forms. It reduces the amount of code you need to write and makes your forms more maintainable and less prone to errors.

What is Formik? A Quick Overview

Formik is a small but powerful form management library for React and React Native. It helps you with the three most annoying parts of building forms:

  • Getting values in and out of form state.
  • Validation and error messages.
  • Handling form submission.

Formik uses a render prop or a custom hook to provide you with everything you need to build and manage forms. It’s designed to be flexible and easy to use, making it a great choice for both simple and complex forms.

Setting Up Your Next.js Project

If you don’t have a Next.js project set up already, you’ll need to create one. You can do this quickly using the `create-next-app` command:

npx create-next-app my-formik-app
cd my-formik-app

This command creates a new Next.js project with all the necessary files and dependencies. Now, let’s install Formik and Yup, a popular validation library, within your project:

npm install formik yup

Yup is a schema builder for value parsing and validation. It allows you to define the structure and validation rules for your form data. While Formik can work without a validation library, using Yup simplifies the process and makes your forms more robust.

Building Your First Form with Formik

Let’s create a simple form to demonstrate how Formik works. We’ll build a basic contact form with fields for name, email, and a message. Create a new file called `ContactForm.js` in your `components` directory (or wherever you prefer to store your components).

Here’s the code for `ContactForm.js`:

import { useFormik } from 'formik';
import * as Yup from 'yup';

const ContactForm = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
      message: '',
    },
    validationSchema: Yup.object({
      name: Yup.string().required('Required'),
      email: Yup.string().email('Invalid email address').required('Required'),
      message: Yup.string().required('Required'),
    }),
    onSubmit: async (values, { resetForm }) => {
      // Simulate an API call
      await new Promise((resolve) => setTimeout(resolve, 500));
      alert(JSON.stringify(values, null, 2));
      resetForm();
    },
  });

  return (
    <form onSubmit={formik.handleSubmit} className="contact-form">
      <div className="form-group">
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          name="name"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.name}
        />
        {formik.touched.name && formik.errors.name ? (
          <div className="error">{formik.errors.name}</div>
        ) : null}
      </div>

      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.email}
        />
        {formik.touched.email && formik.errors.email ? (
          <div className="error">{formik.errors.email}</div>
        ) : null}
      </div>

      <div className="form-group">
        <label htmlFor="message">Message:</label>
        <textarea
          id="message"
          name="message"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.message}
        />
        {formik.touched.message && formik.errors.message ? (
          <div className="error">{formik.errors.message}</div>
        ) : null}
      </div>

      <button type="submit" disabled={!formik.isValid} className="submit-button">
        Submit
      </button>
    </form>
  );
};

export default ContactForm;

Let’s break down this code:

  • **Import Statements:** We import `useFormik` from `formik` and `Yup` from `yup`.
  • **`useFormik` Hook:** This is the core of Formik. We call `useFormik` and pass it an object with several properties:
    • **`initialValues`:** An object defining the initial values of your form fields.
    • **`validationSchema`:** (Optional) An object defining the validation rules for your form fields using Yup.
    • **`onSubmit`:** A function that is called when the form is submitted. This is where you handle form submission logic (e.g., sending data to an API).
  • **Form Fields:** The form fields (`<input>` and `<textarea>`) are bound to Formik using the `onChange`, `onBlur`, and `value` props.
  • **Error Handling:** The code displays validation errors below each field using `formik.errors` and `formik.touched`.
  • **Submit Button:** The submit button is disabled if the form is invalid (`!formik.isValid`).

Now, let’s use the `ContactForm` component in your `pages/index.js` file (or your preferred page file):

import ContactForm from '../components/ContactForm';

const Home = () => {
  return (
    <div>
      <h1>Contact Us</h1>
      <ContactForm />
    </div>
  );
};

export default Home;

Run your Next.js development server with `npm run dev` and navigate to your home page. You should see your contact form. Try submitting the form without filling in the fields or with invalid data. You’ll see the validation errors displayed. Once you fill in the fields correctly, the form will submit (and display the form data in an alert, as defined in our `onSubmit` function).

Understanding `useFormik` and its Properties

The `useFormik` hook is the heart of Formik. It provides a set of properties and methods that make it easy to manage your forms. Let’s explore some of the most important ones:

  • **`initialValues`:** An object that defines the initial values of your form fields. This is required.
  • **`validationSchema`:** (Optional) An object that defines the validation rules for your form fields using Yup. This is a powerful way to validate your form data.
  • **`onSubmit`:** A function that is called when the form is submitted. This is where you handle form submission logic (e.g., sending data to an API). It receives two arguments:
    • `values`: An object containing the current values of your form fields.
    • `actions`: An object containing helper methods, such as `resetForm`, `setSubmitting`, and `setErrors`.
  • **`handleChange`:** A function that you attach to your input fields’ `onChange` event. It updates the form values when the user types in the input fields.
  • **`handleBlur`:** A function that you attach to your input fields’ `onBlur` event. It marks the field as touched, which is used to trigger validation.
  • **`handleSubmit`:** A function that you attach to your form’s `onSubmit` event. It handles the form submission logic, including validation and calling the `onSubmit` function.
  • **`values`:** An object containing the current values of your form fields.
  • **`errors`:** An object containing any validation errors. The keys of the object are the field names, and the values are the error messages.
  • **`touched`:** An object that indicates which fields have been touched by the user. This is useful for displaying validation errors only after the user has interacted with a field.
  • **`isSubmitting`:** A boolean that indicates whether the form is currently being submitted.
  • **`isValid`:** A boolean that indicates whether the form is valid.
  • **`resetForm`:** A function that resets the form to its initial values.
  • **`setErrors`:** A function that allows you to manually set validation errors.
  • **`setSubmitting`:** A function that sets the `isSubmitting` flag.

Advanced Formik Techniques

Formik offers several advanced techniques for building more complex forms. Here are a few examples:

1. Dynamic Forms

Sometimes you need forms that can dynamically add or remove fields. Formik and Yup work well together in these scenarios. For example, consider a form that allows users to add multiple email addresses.

import { useFormik, FieldArray } from 'formik';
import * as Yup from 'yup';

const EmailListForm = () => {
  const formik = useFormik({
    initialValues: {
      emails: [''], // Start with one empty email field
    },
    validationSchema: Yup.object({
      emails: Yup.array().of(
        Yup.string().email('Invalid email address').required('Required')
      ),
    }),
    onSubmit: async (values) => {
      console.log(values);
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <FieldArray name="emails">
        {(fieldArrayProps) => (
          <div>
            {formik.values.emails.map((email, index) => (
              <div key={index} className="email-field-group">
                <label htmlFor={`emails.${index}`}>Email {index + 1}:</label>
                <input
                  type="email"
                  id={`emails.${index}`}
                  name={`emails.${index}`}
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                  value={email}
                />
                {formik.touched.emails && formik.errors.emails && formik.errors.emails[index] ? (
                  <div className="error">{formik.errors.emails[index]}</div>
                ) : null}
                <button
                  type="button"
                  onClick={() => fieldArrayProps.remove(index)}
                  disabled={formik.values.emails.length === 1}
                >
                  Remove
                </button>
              </div>
            ))}
            <button
              type="button"
              onClick={() => fieldArrayProps.push('')}
            >
              Add Email
            </button>
          </div>
        )}
      </FieldArray>
      <button type="submit" disabled={!formik.isValid}>Submit</button>
    </form>
  );
};

export default EmailListForm;

In this example, we use `FieldArray` from Formik to manage the array of email addresses. We dynamically render input fields based on the `emails` array in the `formik.values`. The `fieldArrayProps` provide methods like `push` (to add a new field) and `remove` (to remove a field). The validation schema uses `Yup.array().of()` to validate each email address in the array.

2. Formik with Third-Party Components

Formik seamlessly integrates with third-party React components. For example, you might want to use a component library like Material UI or Ant Design for your form elements. You simply need to ensure that the component accepts the necessary props (like `onChange`, `onBlur`, `value`, and `error`) and that you pass the corresponding Formik values and methods.

Here’s an example using Material UI’s `TextField` component:


import { useFormik } from 'formik';
import * as Yup from 'yup';
import TextField from '@mui/material/TextField';

const MuiForm = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
    },
    validationSchema: Yup.object({
      name: Yup.string().required('Required'),
    }),
    onSubmit: async (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <TextField
        label="Name"
        variant="outlined"
        id="name"
        name="name"
        value={formik.values.name}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={formik.touched.name && Boolean(formik.errors.name)}
        helperText={formik.touched.name && formik.errors.name}
      />
      <button type="submit" disabled={!formik.isValid}>Submit</button>
    </form>
  );
};

export default MuiForm;

Notice how we pass `formik.handleChange`, `formik.handleBlur`, and `formik.values.name` to the `TextField` component. We also use `formik.touched` and `formik.errors` to display the error state and error messages.

3. Field-Level Validation

While Yup schemas are great for defining validation rules, sometimes you need more granular control over validation. Formik allows you to perform field-level validation by providing a `validate` prop to the `useFormik` hook. This prop is a function that receives the form values and returns an object of errors.


import { useFormik } from 'formik';

const FieldLevelValidationForm = () => {
  const formik = useFormik({
    initialValues: {
      username: '',
    },
    validate: (values) => {
      const errors = {};
      if (!values.username) {
        errors.username = 'Username is required';
      } else if (values.username.length < 3) {
        errors.username = 'Username must be at least 3 characters';
      }
      return errors;
    },
    onSubmit: async (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.username}
      />
      {formik.touched.username && formik.errors.username ? (
        <div className="error">{formik.errors.username}</div>
      ) : null}
      <button type="submit" disabled={Object.keys(formik.errors).length > 0}>
        Submit
      </button>
    </form>
  );
};

export default FieldLevelValidationForm;

In this example, the `validate` function checks the `username` field and sets an error if it’s empty or too short. Note that when using field-level validation, you can disable the submit button based on the presence of any errors in the `formik.errors` object.

Common Mistakes and How to Fix Them

While Formik simplifies form management, there are a few common pitfalls that developers encounter. Here are some of them and how to avoid them:

1. Not Using `onBlur` for Validation

A common mistake is forgetting to call `formik.handleBlur` on your input fields. Without `handleBlur`, the validation errors might not appear until the user submits the form. Make sure to include `onBlur={formik.handleBlur}` on each input field to trigger validation when the user leaves the field.

Fix: Add `onBlur={formik.handleBlur}` to your input fields.

2. Incorrectly Handling Validation Errors

Failing to check `formik.touched` before displaying validation errors can lead to errors appearing before the user has interacted with the field. This can be confusing for the user.

Fix: Use `formik.touched[fieldName] && formik.errors[fieldName]` to conditionally display validation errors.

3. Not Disabling the Submit Button

Allowing the user to submit an invalid form can lead to data integrity issues and a poor user experience. Make sure to disable the submit button when the form is invalid.

Fix: Use `disabled={!formik.isValid}` on your submit button.

4. Missing Initial Values

Forgetting to provide initial values for your form fields can lead to unexpected behavior and errors. Always initialize your form fields with appropriate values using the `initialValues` prop.

Fix: Define `initialValues` in your `useFormik` configuration.

5. Incorrectly Using Yup Validation

When using Yup, be careful about the types and rules you define. Make sure your Yup schema matches the structure of your form data and that you’re using the correct validation methods (e.g., `string().email()`, `number().min()`).

Fix: Double-check your Yup schema and ensure the validation rules are accurate and appropriate for your fields.

SEO Best Practices for Formik Tutorials

To ensure your Formik tutorial ranks well on Google and Bing, it’s important to follow SEO best practices:

  • **Keyword Research:** Identify relevant keywords that people search for when looking for Formik tutorials (e.g., “Formik tutorial”, “Formik Next.js”, “React form validation”).
  • **Title and Meta Description:** Craft a clear and concise title that includes your target keywords. Write a compelling meta description that accurately summarizes your tutorial and encourages clicks.
  • **Header Tags:** Use header tags (H2, H3, H4) to structure your content and make it easy to read.
  • **Keyword Optimization:** Naturally incorporate your target keywords throughout your content, including in headings, subheadings, and body text. Avoid keyword stuffing.
  • **Internal Linking:** Link to other relevant articles on your blog to improve your site’s internal linking structure.
  • **Image Optimization:** Use descriptive alt text for your images, including relevant keywords.
  • **Mobile Responsiveness:** Ensure your tutorial is mobile-friendly.
  • **Content Quality:** Provide high-quality, original content that is helpful and informative.
  • **Code Examples:** Include well-formatted code examples with comments to make it easy for readers to understand and follow your tutorial.

Summary / Key Takeaways

Formik is a powerful and versatile library that simplifies form management in React and Next.js. By using Formik, you can significantly reduce the amount of boilerplate code you need to write, making your forms more maintainable, less error-prone, and easier to build. The `useFormik` hook is the core of Formik, providing everything you need to manage form state, handle validation, and submit forms. Coupled with a validation library like Yup, you can create robust and user-friendly forms with ease. Remember to follow best practices for error handling, validation, and user experience to ensure your forms work seamlessly and provide a positive experience for your users. From basic contact forms to complex data entry interfaces, Formik is an invaluable tool for any Next.js developer.

FAQ

1. What are the main advantages of using Formik?

Formik simplifies form management by handling form state, validation, and submission. It reduces boilerplate code, makes forms more maintainable, and integrates seamlessly with validation libraries like Yup.

2. Can I use Formik without a validation library like Yup?

Yes, you can. Formik provides the necessary tools to manage form state and submission. However, using a validation library like Yup is highly recommended as it simplifies the validation process and makes your forms more robust.

3. How do I handle form submission with Formik?

You handle form submission within the `onSubmit` function of the `useFormik` hook. This function receives the form values and an `actions` object, which provides helper methods like `resetForm` and `setSubmitting`.

4. How do I validate form fields with Formik?

You can validate form fields using a validation schema (e.g., with Yup) or by providing a `validate` function to the `useFormik` hook for field-level validation.

5. How does Formik handle errors?

Formik provides the `errors` object, which contains validation errors for each field. You can access these errors and display them in your form using the `formik.errors` object and the `formik.touched` object to ensure errors are displayed only after the user interacts with the field.

Formik offers a streamlined approach to form creation, significantly reducing the complexity often associated with building interactive forms within Next.js applications. By leveraging its features, developers can create forms that are not only functional but also user-friendly and easily maintainable. Mastering Formik empowers you to focus on the core functionality of your application, rather than getting bogged down in the intricacies of form management. This, in turn, allows for more efficient development cycles and the creation of more engaging user experiences.

More posts