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 a Si...
🔗 Next.js Intercepting Routes & Modal: • Next.js Modal with Parallel & Intercepting...
🔗 Getting Started with ShadCN/ui: • Build Your UI Component Library in React &...
🔗 TypeScript Course: • TypeScript Full Course for Beginners | Com...
📚 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
On this page of the site you can watch the video online Next.js Modal Form w/ React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 14 June 2024, share the link with friends and acquaintances, this video has already been watched 27,759 times on youtube and it was liked by 926 viewers. Enjoy your viewing!
