Next.js Handling Forms

Handling forms in Next.js is similar to handling forms in React. The main difference is that you have to use a third-party library like formik or react-hook-form to handle form values and validations. In this guide, we will show you how to handle forms in Next.js using formik.

Installation

You can install formik using either npm or yarn.

# using npm
$ npm install formik

# using yarn
$ yarn add formik

Example

import { Formik, Form, Field, ErrorMessage } from 'formik'

const ContactForm = () => {
  const handleSubmit = (values, { setSubmitting }) => {
    // Handle form submission
    console.log(values)
    setSubmitting(false)
  }

  return (
    <Formik
      initialValues={{ name: '', email: '', message: '' }}
      validate={(values) => {
        const errors = {}
        if (!values.name) {
          errors.name = 'Required'
        }
        if (!values.email) {
          errors.email = 'Required'
        } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
          errors.email = 'Invalid email address'
        }
        if (!values.message) {
          errors.message = 'Required'
        }
        return errors
      }}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <label htmlFor="name">Name</label>
            <Field type="text" name="name" />
            <ErrorMessage name="name" />
          </div>
          <div>
            <label htmlFor="email">Email</label>
            <Field type="email" name="email" />
            <ErrorMessage name="email" />
          </div>
          <div>
            <label htmlFor="message">Message</label>
            <Field name="message" as="textarea" />
            <ErrorMessage name="message" />
          </div>
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  )
}

export default ContactForm

Explanation

In the above example, we have used formik to handle form values, validations, and submission.

• Formik is a wrapper component that provides the necessary context and state for the form.
• Form is a wrapper component that renders an HTML form element.
• Field is a component that renders an HTML input element or textarea element.
• ErrorMessage is a component that renders an error message if the validation fails.
• The initialValues prop of Formik is an object that holds the initial values of the form fields.
• The validate prop of Formik is a function that validates the form fields.
• The onSubmit prop of Formik is a function that is called when the form is submitted.

Use

You can use the formik library to handle forms in your Next.js application. You can easily create a form and add validation to it by using the FormField, ErrorMessage, and Formik components.

Important Points

• Use formik or react-hook-form to handle form values and validations in Next.js.
• You can use yup to define the schema for your form validations.
• Use the Formik component to wrap your form and provide the necessary context and state.
• Use the Field and ErrorMessage components to handle input values and validation errors.

Summary

Handling forms in Next.js can be done using third-party libraries like formik or react-hook-form. In this guide, we have shown you how to handle forms using formik. You can use the Formik, Field, and ErrorMessage components to handle form values and validations. By following the best practices, you can easily create powerful forms in your Next.js application.