Next.js Multi-Step Form Tutorial

This is a repository for my article series on building a multi-step form in Next.js with Next.js 14 (App Router), TailwindCSS, Shadcn/ui, React Hook Form, Zod, Zustand, and usehooks-ts.

Series: Build a Multi-Step Form in Next.js

Features:

Form setup using React Hook Form
Form validation using Zod
Advanced validation methods .transform and .refine
Asynchronous form validation
HEAD request to validate URL field
Modern UI using TailwindCSS and Shadcn/ui
Debounced input value using usehooks-ts
Dynamic input UI with Lucide icons
State management using Zustand
Persist data to local storage with middleware

Cloning The Repository

git clone https://github.com/benorloff/nextjs-multi-step-form-tutorial.git

Install packages

npm i

Start The App

npm run dev