Next.js Modal Form w/ React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn how to build a Next.js Modal Form with React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation, TailwindCSS, TypeScript and more. Creating a modal form that launches from a table of results is a common use case in business applications. In this NextJS tutorial, you will learn how.
🙏 Thank you to daily.dev for sponsoring this video! Stay up to date with their amazingly free curated web development platform: https://daily.dev/dave-gray
💖 Support me on Patreon ➜ / davegray
🙌 Bonus: Supporting Patreon members get the source code for my "Input With Datepicker" component that works with this Modal Form tutorial: / patron-exclusive-106135808
⭐ Become a full-stack web dev with Zero To Mastery Courses:
Complete Next.js Developer: https://bit.ly/CompNextJSDev
Advanced React: https://bit.ly/AdvReactDev
Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code Example: https://github.com/gitdagray/nextjs-f...
🔗 My Next.js Videos: • Next.js Tutorials for Beginners
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Next.js Modal Form w/ React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation
(00:00) Intro
(00:17) Welcome
(00:26) What's Your Story?
(01:41) Next.js Modal with a Form
(02:09) Prerequisites
(02:35) Project Dependencies
(06:09) Example App
(11:56) App Components & Routing
(15:45) Fetching Type-Safe Data with zod-fetch
(17:39) Form Component with react-hook-form
(19:30) Save Alert Confirmation Pop-up
(21:35) Applying & Viewing the Modal
(23:45) onSubmit Function
(25:42) Next.js Server Action w/ Zod Validation
(27:32) Rendering the Form with Server Action Responses
📺 Video References:
🔗 Next.js Parallel Routes: • NextJS Parallel Routes Explained with...
🔗 Next.js Intercepting Routes & Modal: • Next.js Modal with Parallel & Interce...
🔗 Getting Started with ShadCN/ui: • Build Your UI Component Library in Re...
🔗 TypeScript Course: • TypeScript Full Course for Beginners ...
📚 Tutorial References:
🔗 Next.js: https://nextjs.org
🔗 Next.js Parallel Routes: https://nextjs.org/docs/app/building-...
🔗 Next.js Intercepting Routes: https://nextjs.org/docs/app/building-...
🔗 shadcn/ui: https://ui.shadcn.com/
🔗 shadcn/ui Dialog component: https://ui.shadcn.com/docs/components...
🔗 react-hook-form: https://react-hook-form.com/
🔗 Zod: https://zod.dev/
🔗 zod-fetch: https://www.npmjs.com/package/zod-fetch
🔗 @hookform/resolvers: https://www.npmjs.com/package/@hookfo...
Was this tutorial about Next.js Modal Forms including react-hook-form, ShadCN/ui, Server Actions and Zod Validation helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #modal #form
Watch video Next.js Modal Form w/ React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation online without registration, duration hours minute second in high quality. This video was added by user Dave Gray 14 June 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 23,570 once and liked it 837 people.