Next.js Modal with Parallel & Intercepting Routes, shadcn/ui Dialog

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

(00:00) Intro
(00:14) Welcome
(00:26) Motivation
(01:13) Overview & Prerequisites
(01:57) Starter Project
(05:52) Run the project
(06:45) Adding shadcn/ui
(09:35) Component review
(11:10) Create a Parallel Route
(13:24) Create the Intercepting Route
(17:13) Create the Modal with shadcn/ui
(21:35) Applying & Viewing the Modal
(24:11) Forms in a Modal

📺 Video References:

📚 Tutorial References:

#nextjs #modal #dialog

[aliksargsyan]

Even I'm Java Srping Boot software backend engineer, but your content is always intereted me, I appreciate your hard work to bring us such a high quality content. Thank you Dave God Bless you and your family and also welcome back :)

[sibanzboss]

yes Dave, we want to see the video about a form in a modal

[alarafatsiddique]

Really enjoyed this, kindly apply this on form

[CodeZakk]

you dropped this when I needed it. i've read the documentation but I didn't understand that much thanks for the video!!

[joesilva-rodriguez]

I have everyone that starts with our company to go through your NextJS/Tailwind Course so they can be assets in our teams as fast as possible. Keep em coming!

[mistersir]

I wish I knew about your channel when I was in college, but I'm glad you've decided to chose this path and help us grow as developers. Your contribution brings so much value to people like myself. I've been following your tutorials and there hasn't been a point where I've felt lost. Your teaching style is simple and effective. Loving it!

Thank you Dave!

[aghil_shoja]

Hi Dave, I get very excited when you upload new videos on YouTube, thank you once again for your invaluable tutorials

[g_k_shuvo]

I appreciate your hard work to bring us such a high quality content. Thank you Dave!

[idevbrandon]

Thank you so much, Dave! Modal was kicking my ass

[mickeykadimov]

Hey Dave Gary. Very helpful! I would love to see you making a video also about intercepted-searchbar 🙋‍♂🙋‍♂ thank you in advance.

[amadeosph]

Hi Dave, I'm from Brazil 🇧🇷 and I'm learning a lot from all your I really appreciate you making this high quality content. thank you 😁✅

[ilan]

Alway thank you Dave. I am usually doing that in an e-commerce shop so I can show the product details and of course the check out. I’d be happy if you can show forms and tables as you suggested ❤

[mj]

Love the 7 day beard Dave, you definiely deserve it all the work you in

[gerrcassytb]

Enjoy your vacation, cheers to this industry!

[rusko_]

I always find reloading a page with an open modal to lose its content outside the modal to be frustrating, because I expect the modal to disappear when I refresh the page. Instead, it does the exact opposite, which can be very annoying. Initially, when I encountered this behavior on Instagram, I thought it was a bug.

[MattJenningsChannel]

Thanks for the content Dave - would be great to see your approach to editing data tables with modals in NextJS 🙌

[ProCoder]

Привет Дэйв! Спасибо за интересное видео. Очень жду новые выпуски. Ты потрясающий учитель. Спасибо, что делишься своими знаниями со всеми нами.

[MrRicardosgeral]

Yes. Modal with react table. I need it😊

[gopuadks]

Thank you so much dave i really need this concept and you just drop a this video, how lucky I am

[andrewpaulhart]

Great video. Thanks. However I'm having a little trouble wrapping my head around exactly what is happening. I am still confused as to why the modal disappears when we navigate back to the home page, and for that matter why the non modal version isn't showing when the page is first displayed. When using parallel routes to implement a dashboard all the parallel routes are rendered on screen together. Since the modal seems to be implemented as a slot in the layout in the same way, why is it not displayed like all the slots are displayed initially on a dashboard? I'm wondering whether it is the null default.tsx that makes the modal disappear, but you seemed to downplay its significance so that's probably not it. Perhaps, brain cell impaired such as myself, more explanation contrasting the previous modal implementation, ie opening and closing the modal, and the nextjs 14 approach of having the modal always open would be a good.