multi-step form wizard in NextJS

Using NextJS + TypeScript + SCSS

Created a multi-step form wizard in NextJS that guides the user through several steps, collecting information at each step and validating user input before proceeding to the next step. The form include dynamic page tracking at the top to indicate the current step/page number.

Pointers to maintain in code:

1. Step Components
2. Navigation
3. Validation of fields with error fields
4. Config driven if feasible

Buttons

• Button "Back" takes you to previous page
• Button "Next" takes you to next page

Step 1

After validating Name input

Step 2

After validating email input

Step 3

After validating password input,

• Form gets submitted
• displays notification "Form Submitted".
• Button "Fill Again" takes to first page again