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

[@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! 🙏

[@irfansaeedkhan7242]

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

[@DaveGrayTeachesCode]

You're very welcome!

[@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! 🙌

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

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

[@javikuma]

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

[@DaveGrayTeachesCode]

Glad it was helpful!

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

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

[@풍월상신]

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

[@DaveGrayTeachesCode]

You're welcome!

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

[@konstantechang2779]

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

[@DaveGrayTeachesCode]

Glad to hear that!

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

[@alirezakiani1222]

It was great I am waiting for your next videos

[@WahidulIslam-vh5jr]

thanks for this video. so helpful ❤💕

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

[@techchannel0]

thank you, I've been looking for this

[@DaveGrayTeachesCode]

Glad I could help

[@rajfekar1514]

thanks for this video. it help me alot.🌼

[@DaveGrayTeachesCode]

Glad to hear that!

[@Sylar7773]

As always the best!!! Thank YOU

[@DaveGrayTeachesCode]

You're welcome! 🙌

[@psyferinc.3573]

yay, in depth modals

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

[@oscarsangularchannel3956]

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

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

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?

[@alessandrosalzo8280]

Hey Dave, what VS Code theme are you using?

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

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

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

[@GabrielMartinez-ez9ue]

In case I have a form in a page that is not in a modal, how can I trigger that alert if the user clicked on another url without saving change?

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

[@Pptruenoz]

Nice

[@oladapooluwadurotimi2865]

❤

[@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.🙌

[@brancode404]

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

[@DaveGrayTeachesCode]

Nice request!

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

[@ciruz]

in the server action on save you can revalidate the list page like revalidatePath(`/users`), and on the client side in the onSubmit, you do your router.back(). then you have the fresh data in the list

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

[@ciruz]

use revalidatePath(`/user`) in your server save action and router.back() in the onSubmit handler on the client side after the save

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

[@rebeldes96]

I cloned your repo, did 'npm install' then follow your video, but I was getting a error: "message": "Expected number, received string" when clicking on "View Users" from getUsers file... I think zod-fetch is returning "id" as string, searching in stackOverflow I found a solution: add ".coerce" at id UserSchema: Before: export const UserSchema = z.object({ id: z.number().int().positive(), firstname: z After: export const UserSchema = z.object({ id: z.coerce.number().int().positive(), firstname: z Hope this help someone with same issue...

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