Using Formik for Form Handling in Next.js: A Complete Guide

Introduction:

Forms are an essential part of most web applications. Handling forms efficiently is crucial whether it's a simple contact form or a complex user registration. When working with Next.js, handling forms can be made much easier with Formik, a powerful library that simplifies form validation, management, and submission. In this blog, I'll guide you through using Formik in your Next.js projects and how it can help streamline your form management.

What is Formik?

Formik is a popular open-source library for handling forms in React applications. It simplifies the process of managing form state, handling form validation, and processing submissions. The beauty of Formik is that it abstracts much of the repetitive and boilerplate code required for forms, allowing you to focus on your app's logic.

Key features of Formik:

• Managing form state effortlessly

• Handling form validation (supports schema-based validation with Yup)

• Submitting form data easily

• Built-in form handling hooks

Setting Up Formik in a Next.js Project

Create a New Next.js Project

npx create-next-app formik-nextjs-demo
cd formik-nextjs-demo

Install Formik and Yup

npm install formik yup

Creating a Simple Form with Formik

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

export default function Register() {
  const initialValues = {
    name: '',
    email: '',
    password: '',
  };

  const validationSchema = Yup.object({
    name: Yup.string().required('Name is required'),
    email: Yup.string().email('Invalid email format').required('Email is required'),
    password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
  });

  const onSubmit = (values) => {
    console.log('Form data', values);
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Register</h1>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={onSubmit}
      >
        <Form className="space-y-4">
          <div>
            <label htmlFor="name">Name</label>
            <Field name="name" type="text" className="input" />
            <ErrorMessage name="name" component="div" className="error" />
          </div>

          <div>
            <label htmlFor="email">Email</label>
            <Field name="email" type="email" className="input" />
            <ErrorMessage name="email" component="div" className="error" />
          </div>

          <div>
            <label htmlFor="password">Password</label>
            <Field name="password" type="password" className="input" />
            <ErrorMessage name="password" component="div" className="error" />
          </div>

          <button type="submit" className="btn">Register</button>
        </Form>
      </Formik>
    </div>
  );
}

Conclusion

Formik is a highly flexible and powerful library for handling forms in React and Next.js. It takes care of much of the boilerplate code and lets you focus on your app’s business logic. Combined with Yup for validation, it provides a robust solution for managing forms in your Next.js projects.