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

[@DaveGrayTeachesCode]

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

[@joshuaochieng3091]

I totally love your tutorials. No matter how long the video I always know in the end I'll definitely get what I came for and even learn more stuff. So I just wanted you to know how helpfull your videos are and that you should keep it up

[@irfansaeedkhan7242]

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

[@DaveGrayTeachesCode]

You're very welcome!

[@deathdefier45]

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]

Thanks for the kind words! 🙏

[@colinswancs]

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]

Great requests - thanks!

[@yw3546]

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]

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

[@Bratislav_Zdravkovic]

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]

Thank you and thanks for the suggestions! 🙌

[@issanoor2541]

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]

Great to hear!

[@Diego_Cabrera]

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]

Thanks! Yes, several lines indeed!

[@javieracosta4956]

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

[@DaveGrayTeachesCode]

Glad it was helpful!

[@Chris...S]

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

[@DaveGrayTeachesCode]

Thanks for the suggestion!

[@sibanzboss6705]

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]

You're welcome and great suggestions!

[@ahmedsanad3384]

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

[@DaveGrayTeachesCode]

Great suggestion!

[@풍월상신]

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

[@DaveGrayTeachesCode]

You're welcome!

[@techchannel0]

thank you, I've been looking for this

[@DaveGrayTeachesCode]

Glad I could help

[@alirezakiani1222]

It was great I am waiting for your next videos

[@jfhandfield]

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]

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

[@WahidulIslam-vh5jr]

thanks for this video. so helpful ❤💕

[@DaveGrayTeachesCode]

You're welcome!

[@NikitaPolovinkin]

Thanks a lot for this video! Do you know is there is an easy way to enable transitions on intercepted modals? I can not make it work for som reason

[@jerebenitez8542]

Thanks! This solved a huge problem for me. I had implemented this differently and it was ugly lmao. Also instead of doing {flag ? () : null}, you can just do {flag && ()}. Cheers!

[@conanastasiou2568]

Hi Dave, great video. I was trying to close the Modal on Submit and had a question that I'd like to understand. If I add router. back() to the UserForm onSubmit then the modal closes but the users page won't refresh (even though the changes are saved) however if I use the fallback route directly i.e. /users/edit/1 then this works fine. Any advice?

[@rajfekar1514]

thanks for this video. it help me alot.🌼

[@DaveGrayTeachesCode]

Glad to hear that!

[@konstantechang2779]

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

[@DaveGrayTeachesCode]

Glad to hear that!

[@Sylar7773]

As always the best!!! Thank YOU

[@DaveGrayTeachesCode]

You're welcome! 🙌

[@yarapolana]

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]

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

[@oscarsangularchannel3956]

Thanks for the video I would like to see how to use tanstack Query and table with same dynamics as here ? Thank you

[@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'

Hello Dave, I really enjoyed learning from this video, there is one thing though, to populate the form you are passing the id of the user in the URL, but for some other use cases this won't be SEO friendly especially if you have long ids, how we can implement this with clear urls?

[@psyferinc.3573]

yay, in depth modals

[@alessandrosalzo8280]

Hey Dave, what VS Code theme are you using?

[@OnlyJavascript]

i love your content so much. I have a request. could you please do it for us? server side search, sort, multi-filter and pagination using shandcn table component and tanstack table. please use drizzle orm.

[@ahmedkhabar]

Hi Mr Dave, I have a question about the name type for the InputWithLabel component, how can we make it show a type error if we use a name doesn't exist in the schema.

[@DaveGrayTeachesCode]

Good question and going the extra mile! You could alter this and use a generic type that accepts the schema. Then nameInSchema would by a keyof the generic. This could be a nice addition.🙌

[@vivekthapa5979]

Thanks Dave.. Can we have PWA using nextjs

[@DaveGrayTeachesCode]

Interesting topic! I need to look into this 🙌

[@vivekthapa5979]

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

[@Md_sadiq_Md]

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]

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]

@@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]

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

[@oladapooluwadurotimi2865]

❤

[@vikingshadow4877]

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]

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]

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]

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

[@5353055]

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

[@DaveGrayTeachesCode]

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

[@Pptruenoz]

Nice

[@brancode404]

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

[@DaveGrayTeachesCode]

Nice request!

[@djtoon8412]

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]

Good advanced topic requests!

[@Innesb]

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.