Next.js Modal Form w/ React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation
14.9 هزار بار بازدید -
2 ماه پیش
-
Web Dev Roadmap for Beginners
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 ➜ Patreon: davegray
🙌 Bonus: Supporting Patreon members get the source code for my "Input With Datepicker" component that works with this Modal Form tutorial: Patreon: 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: 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: Twitter: yesdavidgray
LinkedIn: 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
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 ➜ Patreon: davegray
🙌 Bonus: Supporting Patreon members get the source code for my "Input With Datepicker" component that works with this Modal Form tutorial: Patreon: 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: 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: Twitter: yesdavidgray
LinkedIn: 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
2 ماه پیش
در تاریخ 1403/03/25 منتشر شده
است.
14,924
بـار بازدید شده