Next.js Modal Form w/ React-Hook-Form, ShadCN/ui Dialog, Server Actions & Validation

Подписаться 314 тыс.

Просмотров 9 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): 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: 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-10613...
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
🔗 Source Code Example: github.com/gitdagray/nextjs-f...
🔗 My Next.js Videos: • Next.js Tutorials for ...
👇 Follow Me On Social Media:
GitHub: 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...
🔗 Next.js Intercepting Routes & Modal: • Next.js Modal with Par...
🔗 Getting Started with ShadCN/ui: • Build Your UI Componen...
🔗 TypeScript Course: • TypeScript Full Course...
📚 Tutorial References:
🔗 Next.js: nextjs.org
🔗 Next.js Parallel Routes: nextjs.org/docs/app/building-...
🔗 Next.js Intercepting Routes: nextjs.org/docs/app/building-...
🔗 shadcn/ui: ui.shadcn.com/
🔗 shadcn/ui Dialog component: ui.shadcn.com/docs/components...
🔗 react-hook-form: react-hook-form.com/
🔗 Zod: zod.dev/
🔗 zod-fetch: www.npmjs.com/package/zod-fetch
🔗 @hookform/resolvers: 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

Опубликовано:

20 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 68

@DaveGrayTeachesCode 8 дней назад

BIG thanks to daily dot dev for sponsoring this video! 🙌 Stay up-to-date in all things web development with their amazingly free curated web development platform. Check it out here: daily.dev/dave-gray

@irfansaeedkhan7242 6 дней назад

yes modal with a form is needed in almost all projects, thank you for sharing your way

@DaveGrayTeachesCode 6 дней назад

You're very welcome!

@bratislavZdravkovic98 6 дней назад

I would like to see more Next.js videos, specifically on next-intl with Zod and react-hook-form. What are your thoughts about next-safe-action? Maybe you could provide an example with it. How would you handle prop drilling? For example, if you have a modal with a Select component that needs options fetched from the backend. Also, could you cover some global error handling? When would you use error.ts, and when would you just show a notification? Keep up the good work

@DaveGrayTeachesCode 6 дней назад

Thank you and thanks for the suggestions! 🙌

@sibanzboss6705 6 дней назад

thanks for the video Dave was very helpful, i'd like to see in futures videos how to create a report or a bill pdf file, and also a video about cron jobs

@DaveGrayTeachesCode 6 дней назад

You're welcome and great suggestions!

@colinswancs 5 дней назад

Dave, A video on data fetching in Next.js 14 (App Router) would be great. Covering API Routes for webhooks, Server Actions for server-side data fetching, using Server Components with Server Actions for inline fetching, and integrating TanStack Query for client-side data handling. Thanks, for the content. :)

@DaveGrayTeachesCode 5 дней назад

Great requests - thanks!

@user-qj4rr1rm8i 8 дней назад

Thanks Dave. I've waited for this upload!😁

@DaveGrayTeachesCode 7 дней назад

You're welcome!

@javieracosta4956 8 дней назад

Great video! The concepts are very well explained. Thanks, Dave! 💪

@DaveGrayTeachesCode 8 дней назад

Glad it was helpful!

@konstantechang2779 6 дней назад

I am watching your 4hr long HTML tutorial. It's great Thanks Dave

@DaveGrayTeachesCode 6 дней назад

Glad to hear that!

@issanoor2541 5 дней назад

Hey dave am really a big student of your tutorials since i began my web dev journey.i watched html,css,and javascript and honestly you've really helped me alot bcoz you explain things in a nice easily understable terms and right now i have began listening the react tutorial and i can say am well good knowing react bit by bit following you along your tutorial

@DaveGrayTeachesCode 4 дня назад

Great to hear!

@Diego_Cabrera 6 дней назад

About a year ago, I had to build one similar and I checked out the video to see if there is any other way to reactor my code. Turns out it will always be quite a few lines haha. Great video man!

@DaveGrayTeachesCode 6 дней назад

Thanks! Yes, several lines indeed!

@yw3546 4 дня назад

I built a similar thing a few weeks ago, a multi step form and keep status and selection on each step. And it’s easy to switch between modal and page. Next.js is pretty flexible.

@DaveGrayTeachesCode 4 дня назад

Nice! And yes, I agree on how flexible it can be for building what you need.

@deathdefier45 6 дней назад

Been following this channel for almost 3 years now, a pillar of the javascript/react/typescript community, I've followed through the complete nodejs and complete react courses which is where I learnt the dev patterns for the first time. Thank you for sharing your knowledge, hope to teach like you some day

@DaveGrayTeachesCode 5 дней назад

Thanks for the kind words! 🙏

@techchannel0 6 дней назад

thank you, I've been looking for this

@DaveGrayTeachesCode 5 дней назад

Glad I could help

@WahidulIslam-vh5jr 6 дней назад

thanks for this video. so helpful ❤💕

@DaveGrayTeachesCode 6 дней назад

You're welcome!

@Chris...S 6 дней назад

Would love to see you cover a Auth.js or Clerk tenant setup

@DaveGrayTeachesCode 6 дней назад

Thanks for the suggestion!

@rajfekar1514 6 дней назад

thanks for this video. it help me alot.🌼

@DaveGrayTeachesCode 6 дней назад

Glad to hear that!

@Sylar7773 6 дней назад

As always the best!!! Thank YOU

@DaveGrayTeachesCode 6 дней назад

You're welcome! 🙌

@ahmedsanad3384 5 дней назад

Dave, as always, provides an excellent video! 👏🏻👏🏻👏🏻 I believe you can discuss more in-depth topics such as Design Patterns with NextJS.

@DaveGrayTeachesCode 5 дней назад

Great suggestion!

@yarapolana 6 дней назад

just noticed I am not subscribed what?! amazing video once again, Im a Remix child but the latest news made me rethink the next stack

@DaveGrayTeachesCode 6 дней назад

Glad you're here! I am interested in the RR and Remix merger.

@alessandrosalzo8280 6 дней назад

Hey Dave, what VS Code theme are you using?

@evansrobbie7335 День назад

Thanks for this Dave. A quick one, what if I have a button on the modal to view the full page, will I have to perform a full page reload? setting the modal to false just closes the modal but doesn't push to the the page. i.e I still have the route '/user/edit/1' but the content displayed is that of '/user'

@PedroSanchez-od7cc День назад

Nice

@oladapooluwadurotimi2865 8 дней назад

❤

@jfhandfield 16 часов назад

Hey @DaveGrayTeachesCode. At 4:45 you say that you need to install the shadcn component one at a time but you know by doing pnpm dlx shadcn-ui@latest add you get prompted with a list and you can select all the components to install at once.

@DaveGrayTeachesCode 11 часов назад

Nice! I never think of it that way because I always install them as I need them which ends up being one at a time lol

@Paul-st4uq 6 дней назад

Installed 14.2.4 today must of just arrived.

@DaveGrayTeachesCode 6 дней назад

It must have. I'd prefer they not have new releases on the same day I put out a video lol - sometimes they break things

@vivekthapa5979 6 дней назад

Thanks Dave.. Can we have PWA using nextjs

@DaveGrayTeachesCode 6 дней назад

Interesting topic! I need to look into this 🙌

@vivekthapa5979 6 дней назад

@@DaveGrayTeachesCode thank you.. Waiting for your valuable tutorial..

@vikingshadow4877 6 дней назад

Can you make full next 15 course cuz I want to learn next but didnt find a one. "I know you published full one but it's 13"😊

@DaveGrayTeachesCode 6 дней назад

Next.js 15 is still a release candidate, but when it is released I may create an entire new course. Thanks for the request!

@irfansaeedkhan7242 6 дней назад

kindly now as react has 14 version up and running you should update your last video on react or make a shorter version please

@DaveGrayTeachesCode 6 дней назад

Yes, I've been thinking about doing a new React Fundamentals series.

@Md_sadiq_Md 6 дней назад

Hey I am using an application in which I am fetching image links from the database and rendering them But as in nextjs we need to keep the Image links in next.config.js how can I solve this P.S as i don't want to use aws S3 for storing the image Currently I am using the img tag rather than using the next Image

@DaveGrayTeachesCode 6 дней назад

You don't need to keep all links in the next.config.js file. You just need to say what domain those links are coming from. You can see the settings for "remotePatterns" here: nextjs.org/docs/app/api-reference/components/image#remotepatterns

@Md_sadiq_Md 6 дней назад

@@DaveGrayTeachesCode Iam working on Job listing project in which I give users authority to post jobs in which the image of the company is uploaded by link input form not the image directly Now the user can upload an image of any website or any protocol I can't list everything in next.config.js Is there any way of doing it please say for now I am using img tag rather next/Image

@DaveGrayTeachesCode 6 дней назад

@@Md_sadiq_Md Yes interesting question. I would need to look into this to confirm what is possible here.

@brancode404 6 дней назад

Next make an image gallery app with modal popup with prev and next navigation

@DaveGrayTeachesCode 6 дней назад

Nice request!

@5353055 5 дней назад

What is the difference between using Next.js with Server Actions and Next.js with Hono.js?

@DaveGrayTeachesCode 4 дня назад

Hono provides a separate backend. You could still use server actions with Next.js and handle API routes with Hono.

@djtoon8412 6 дней назад

Really how to implement Nextjs auth with without third party libraries like kindle or lucia and add how to implement RBAC .That is saying how to Roll your own Auth.also how to dockerize nextjs project and add reverse proxy like ngnix or caddy and Host on a VPS.

@DaveGrayTeachesCode 6 дней назад

Good advanced topic requests!

@Innesb 6 дней назад

Delta (that’s her channel name), has an excellent roll-your-own Next JS auth video which she uploaded only 2 days ago (13 June 24). She explains how to do it properly, not a high level copy and paste exercise.