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
Auf dieser Seite können Sie das Online-Video Next.js Modal Form w/ React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Dave Gray 14 Juni 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 27,759 Mal angesehen und es wurde von 926 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
