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

  Рет қаралды 18,771

Dave Gray

Dave Gray

Күн бұрын

Пікірлер: 76
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
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
@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
@irfansaeedkhan7242 4 ай бұрын
yes modal with a form is needed in almost all projects, thank you for sharing your way
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
You're very welcome!
@deathdefier45
@deathdefier45 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
Thanks for the kind words! 🙏
@colinswancs
@colinswancs 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
Great requests - thanks!
@yw3546
@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
@DaveGrayTeachesCode 4 ай бұрын
Nice! And yes, I agree on how flexible it can be for building what you need.
@Bratislav_Zdravkovic
@Bratislav_Zdravkovic 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
Thank you and thanks for the suggestions! 🙌
@issanoor2541
@issanoor2541 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
Great to hear!
@Diego_Cabrera
@Diego_Cabrera 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
Thanks! Yes, several lines indeed!
@javieracosta4956
@javieracosta4956 4 ай бұрын
Great video! The concepts are very well explained. Thanks, Dave! 💪
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
Glad it was helpful!
@Chris...S
@Chris...S 4 ай бұрын
Would love to see you cover a Auth.js or Clerk tenant setup
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
Thanks for the suggestion!
@sibanzboss6705
@sibanzboss6705 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
You're welcome and great suggestions!
@ahmedsanad3384
@ahmedsanad3384 4 ай бұрын
Dave, as always, provides an excellent video! 👏🏻👏🏻👏🏻 I believe you can discuss more in-depth topics such as Design Patterns with NextJS.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
Great suggestion!
@풍월상신
@풍월상신 4 ай бұрын
Thanks Dave. I've waited for this upload!😁
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
You're welcome!
@techchannel0
@techchannel0 4 ай бұрын
thank you, I've been looking for this
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
Glad I could help
@alirezakiani1222
@alirezakiani1222 2 ай бұрын
It was great I am waiting for your next videos
@jfhandfield
@jfhandfield 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
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
@WahidulIslam-vh5jr 4 ай бұрын
thanks for this video. so helpful ❤💕
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
You're welcome!
@NikitaPolovinkin
@NikitaPolovinkin 7 күн бұрын
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
@jerebenitez8542 3 ай бұрын
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
@conanastasiou2568 3 ай бұрын
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
@rajfekar1514 4 ай бұрын
thanks for this video. it help me alot.🌼
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
Glad to hear that!
@konstantechang2779
@konstantechang2779 4 ай бұрын
I am watching your 4hr long HTML tutorial. It's great Thanks Dave
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
Glad to hear that!
@Sylar7773
@Sylar7773 4 ай бұрын
As always the best!!! Thank YOU
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
You're welcome! 🙌
@yarapolana
@yarapolana 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
Glad you're here! I am interested in the RR and Remix merger.
@oscarsangularchannel3956
@oscarsangularchannel3956 6 күн бұрын
Thanks for the video I would like to see how to use tanstack Query and table with same dynamics as here ? Thank you
@evansrobbie7335
@evansrobbie7335 4 ай бұрын
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'
3 ай бұрын
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
@psyferinc.3573 15 күн бұрын
yay, in depth modals
@alessandrosalzo8280
@alessandrosalzo8280 4 ай бұрын
Hey Dave, what VS Code theme are you using?
@OnlyJavascript
@OnlyJavascript 2 ай бұрын
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
@ahmedkhabar 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
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
@vivekthapa5979 4 ай бұрын
Thanks Dave.. Can we have PWA using nextjs
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
Interesting topic! I need to look into this 🙌
@vivekthapa5979
@vivekthapa5979 4 ай бұрын
@@DaveGrayTeachesCode thank you.. Waiting for your valuable tutorial..
@Md_sadiq_Md
@Md_sadiq_Md 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
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
@Md_sadiq_Md 4 ай бұрын
@@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
@DaveGrayTeachesCode 4 ай бұрын
@@Md_sadiq_Md Yes interesting question. I would need to look into this to confirm what is possible here.
@oladapooluwadurotimi2865
@oladapooluwadurotimi2865 4 ай бұрын
@vikingshadow4877
@vikingshadow4877 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
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
@irfansaeedkhan7242 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
Yes, I've been thinking about doing a new React Fundamentals series.
@5353055
@5353055 4 ай бұрын
What is the difference between using Next.js with Server Actions and Next.js with Hono.js?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
Hono provides a separate backend. You could still use server actions with Next.js and handle API routes with Hono.
@Pptruenoz
@Pptruenoz 4 ай бұрын
Nice
@brancode404
@brancode404 4 ай бұрын
Next make an image gallery app with modal popup with prev and next navigation
@DaveGrayTeachesCode
@DaveGrayTeachesCode 4 ай бұрын
Nice request!
@djtoon8412
@djtoon8412 4 ай бұрын
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
@DaveGrayTeachesCode 4 ай бұрын
Good advanced topic requests!
@Innesb
@Innesb 4 ай бұрын
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.
Nextjs Server Actions Just Got Better
13:19
Dave Gray
Рет қаралды 10 М.
React Hook Form (+ Zod) - Complete Tutorial
31:21
ByteGrad
Рет қаралды 101 М.
When mom gets home, but you're in rollerblades.
00:40
Daniel LaBelle
Рет қаралды 100 МЛН
What's in the clown's bag? #clown #angel #bunnypolice
00:19
超人夫妇
Рет қаралды 40 МЛН
Next.js Full Stack Project w/ Nextjs 15 & React 19
1:31:19
Dave Gray
Рет қаралды 21 М.
Using Zod Form Validation and Server Actions in NextJs with useFormState Hook
19:40
I HACKED ShadCN to Create Insane React Templates and Installers
14:59
Jack Herrington
Рет қаралды 21 М.
Legend State v3: Local first sync AND fastest React State manager!
16:10
React Hook Form & React 19 Form Actions, The Right Way
16:08
Jack Herrington
Рет қаралды 55 М.
How to Open a Dialog from a Dropdown Menu using shadcn/ui
14:25
Hosna Qasmei
Рет қаралды 5 М.
Why aren't you using Fastify? Or Koa? Or NestJS?
9:58
Maximilian Schwarzmüller
Рет қаралды 60 М.