Building a Multi-Step Form in Next.js | Updated 2024

39

Creating a multi-step form in Next.js can enhance the user experience by breaking down long forms into smaller, manageable steps. This guide will walk you through building a multi-step form in Next.js, covering the essential coding steps and FAQs.

Prerequisites

Before we begin, ensure you have the following:

• Node.js installed
• Basic knowledge of Next.js and React
• A Next.js project setup. If not, create one using:

npx create-next-app@latest multi-step-form
cd multi-step-form

Steps for Building a Multi-Step Form in Next.js

Step 1: Setup Project and Install Dependencies

We will use React Hook Form for managing form state and validation. Install the package:

npm install react-hook-form

or 

yarn add react-hook-form

Step 2: Create Form Steps Components

Create components for each step of the form.

Step1.js

import React from 'react';

const Step1 = ({ register, errors }) => {
  return (
    <div>
      <h2>Step 1</h2>
      <div>
        <label>First Name</label>
        <input {...register('firstName', { required: 'First Name is required' })} />
        {errors.firstName && <p>{errors.firstName.message}</p>}
      </div>
      <div>
        <label>Last Name</label>
        <input {...register('lastName', { required: 'Last Name is required' })} />
        {errors.lastName && <p>{errors.lastName.message}</p>}
      </div>
    </div>
  );
};

export default Step1;

Step2.js

import React from 'react';

const Step2 = ({ register, errors }) => {
  return (
    <div>
      <h2>Step 2</h2>
      <div>
        <label>Email</label>
        <input {...register('email', { required: 'Email is required' })} />
        {errors.email && <p>{errors.email.message}</p>}
      </div>
      <div>
        <label>Phone</label>
        <input {...register('phone', { required: 'Phone is required' })} />
        {errors.phone && <p>{errors.phone.message}</p>}
      </div>
    </div>
  );
};

export default Step2;

Step3.js

import React from 'react';

const Step3 = ({ register, errors }) => {
  return (
    <div>
      <h2>Step 3</h2>
      <div>
        <label>Address</label>
        <input {...register('address', { required: 'Address is required' })} />
        {errors.address && <p>{errors.address.message}</p>}
      </div>
      <div>
        <label>City</label>
        <input {...register('city', { required: 'City is required' })} />
        {errors.city && <p>{errors.city.message}</p>}
      </div>
    </div>
  );
};

export default Step3;

Step 3: Create the Multi-Step Form Component

Create the main form component that will manage the form steps.

MultiStepForm.js

import React, { useState } from 'react';
import { useForm, FormProvider } from 'react-hook-form';
import Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';

const MultiStepForm = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const methods = useForm();
  const { handleSubmit, register, formState: { errors } } = methods;

  const nextStep = () => setCurrentStep((prev) => prev + 1);
  const prevStep = () => setCurrentStep((prev) => prev - 1);
  const onSubmit = (data) => console.log(data);

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        {currentStep === 1 && <Step1 register={register} errors={errors} />}
        {currentStep === 2 && <Step2 register={register} errors={errors} />}
        {currentStep === 3 && <Step3 register={register} errors={errors} />}
       
        <div>
          {currentStep > 1 && <button type="button" onClick={prevStep}>Back</button>}
          {currentStep < 3 && <button type="button" onClick={nextStep}>Next</button>}
          {currentStep === 3 && <button type="submit">Submit</button>}
        </div>
      </form>
    </FormProvider>
  );
};

export default MultiStepForm;

Step 4: Integrate the Form into Your Next.js App

Modify your pages/index.js to include the MultiStepForm component.

pages/index.js

import MultiStepForm from '../components/MultiStepForm';

export default function Home() {
  return (
    <div>
      <h1>Multi-Step Form in Next.js</h1>
      <MultiStepForm />
    </div>
  );
}

Step 5: Run Your Application

Start your Next.js development server:

npm run dev

or 

yarn dev

Open your browser and navigate to http://localhost:3000 to see your multi-step form in action.

Conclusion

In conclusion, creating a multi-step form in Next.js using React Hook Form is an effective way to enhance user experience by breaking down complex forms into simpler, manageable steps. This method ensures efficient form state management and validation, making the process seamless and user-friendly. By following the detailed steps and incorporating best practices from this guide, you can build robust multi-step forms tailored to various applications, improving both functionality and user engagement in your Next.js projects.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Building a Multi-Step Form in Next.js – FAQs