Next js Forms Crash Course (Zod, Actions, useFormState, Progressive Enhancement, and more!

Learn multiple ways to handle forms in Next.js including client and server-side validation with zod, using server actions, progressive enhancement, and more!

Check out Daily.dev - https://daily.dev/

Source Code - https://github.com/jamesqquick/nextjs-form-validation

**Newsletter**
Newsletter 🗞 - https://www.jamesqquick.com/newsletter

**DISCORD**
Join the Learn Build Teach Discord Server 💬 - https://discord.gg/vM2bagU

Follow me on Twitter 🐦 - https://www.twitter.com/jamesqquick
Check out the Podcast - https://compressed.fm/
Courses - https://jamesqquick.com/courses

**QUESTIONS ABOUT MY SETUP**
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. https://www.jamesqquick.com/uses

**TIMESTAMPS**
00:00 - Intro
00:30 - Github Repository Source Code
01:10 - Create New Next.js Project
02:30 - Creating the Basic Form
04:30 - Built-in HTML Validation
06:30 - Shoutout to Daily.dev
08:00 - Creating the Form Action
09:40 - Creating the Zod Schema
13:35 - Validating Form Data
15:00 - Defining a Return Type
17:35 - Formatting Zod Errors
21:00 - Displaying Results from Server Action
26:15 - Showing Alerts with React Hot Toast
29:00 - useFormState Hook
34:30 - Submit Button with useFormStatus
37:00 - Progressive Enhancement
40:00 - Custom Client Side Validation
52:15 - Combining Server and Client Side Errors
53:45 - Testing Progressive Enhancement
56:30 - React Hook Form
1:03:30 - Wrap Up