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

[@aliksargsyan2782]

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 :)

[@DaveGrayTeachesCode]

Thank you for the kind words! I'm glad you like my content even though I have not covered Spring Boot!

[@sibanzboss6705]

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

[@DaveGrayTeachesCode]

Thank you!

[@andrewpaulhart]

Me too. Although I think Ive figured it out, an example of modal login and sign-up forms would be greatly appreciated.

[@mistersir3185]

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!

[@DaveGrayTeachesCode]

Thank you so much!

[@katiehom]

Thank you, Dave! Watching this and your video on parallel routes helped me to better understand how to open a modal on an intercepted parallel route! I appreciate you sharing your wisdom in an approachable way.

[@DaveGrayTeachesCode]

You're welcome!

[@joesilva-rodriguez9]

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!

[@DaveGrayTeachesCode]

That's awesome! Glad I could help 🙌

[@CodeZakk]

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

[@DaveGrayTeachesCode]

Glad it was helpful!

[@aliassar9647]

you always have new lessons to me, though I still read the docs but watching your videos are really helpful to understand more sufficient . Thanx a lot

[@harunadaudq2183]

Really enjoyed this, kindly apply this on form

[@DaveGrayTeachesCode]

Thank you!

[@amadeosph2045]

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

[@DaveGrayTeachesCode]

You're welcome!

[@aghil_shoja]

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

[@DaveGrayTeachesCode]

Glad you like them!

[@gerr_cass]

Enjoy your vacation, cheers to this industry!

[@ilan117]

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 ❤

[@DaveGrayTeachesCode]

You're welcome! Good use cases!

[@idevbrandon]

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

[@psyferinc.3573]

you are guiding in a very understanding way.

[@ProCoder777]

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

[@g_k_shuvo]

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

[@DaveGrayTeachesCode]

You're welcome!

[@mj95412]

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

[@DaveGrayTeachesCode]

Thank you!

[@MattJenningsChannel]

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

[@DaveGrayTeachesCode]

Coming this week! 🙌

[@fatihece3359]

Great content, many thanks sir. Learned so much things from your valuable channel

[@justaregularguy2390]

hi dave, thanks for the guide and yes we would love to watch a video from you about form in a modal mixed with data tables. Thanks

[@DaveGrayTeachesCode]

I'm going to have a form in a modal in my current Next.js 15 Project series. The series is underway, but I haven't published that video yet - but it is coming soon.

[@StephenRayner]

From my CV, Technology Summary Experience: Total industry experience 14 years. Roles 2 years as Director, 3 years as Tech Lead, Full-stack Developer (8 years). AWS (5 years), Typescript/Node (6 years), React/Native (6 years), C# & Python (4 years) Current Role: Vercel, NextJS, Inngest, Twilio, Tailwind, ShadCN, Jest, Docker, Apache Superset, VercelAI, LangGraph, OpenAI, ClaudeAI, pgVector, XState, AWS EC2/ECS/S3/VPC/Lambda/SQS/SFN/SNS, Terraform. And I still find your videos very useful!

[@DaveGrayTeachesCode]

You have a great CV and great experience! So glad my content is still helpful for you. I'm sure you could show me a few things, too!

[@StephenRayner]

@@DaveGrayTeachesCode happy to share ideas. You on Discord?

[@mickeykadimov7128]

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

[@pookiepats]

Frameworks have just gone off the deep end, respect to anybody that actually has to implement these behemoths. I am content writing stored procedures for you to call-just stop trying to run JS in my SQL servers.

[@njosuedev.]

Hello Dave! Thank you

[@풍월상신]

Thanks Dave and welcome back.😊 This intercepting route is still confusing, maybe I need to write my own code. A tutorial video for modal with some form and data will be great. What about a MessageBox Modal with Tabs like inbox and send form etc.

[@DaveGrayTeachesCode]

Thank you! And great suggestions. Yes, working with intercepting routes will help you see how they work. In this modal example, we intercept the request for the photo route segment and instead, display the mirrored route in a modal.

[@gopuadks]

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

[@DaveGrayTeachesCode]

Right on time! Glad I could help.

[@MrRicardosgeral]

Yes. Modal with react table. I need it😊

[@danushkap]

Hi Dave, I'm a big fan of yours. And I'm very much looking forward to the day you will start a React Native course.

[@DaveGrayTeachesCode]

Thanks! And yes, I want to do that!

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

[@yourcasualdeveloper]

As always when I needed most

[@DaveGrayTeachesCode]

Happy to be right on time!

[@ekchills6948]

crazy! please can you do the other application of the modal ((:

[@uraura8165]

Hi. Anybody knows how to prevevnt feed page scrolling up when modal window appear?

[@prepperdon]

FYI - intercepting routes in a subdirectory are broken in 14.2.3. They do work in the root of the app though. Fought that bug for about 4 hours yesterday, rolled next back to 14.1 and they work fine.

[@DaveGrayTeachesCode]

Interesting indeed. It must be a specific scenario as I have a work project currently on 14.2.3 which uses a subdirectory (..)route-segment that is working with no issues.

[@prepperdon]

@@DaveGrayTeachesCode Could have been my specific scenario, but I did find a few reports in github complaining about the same issue. I was trying to intercept a rout 3 levels deep - /dashboard/questions/edit and it just wouldn't work no matter what I tried.

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

[@dragonloboJR]

Very useful for ux!

[@DaveGrayTeachesCode]

Agree!

[@JimHarris-w2x]

This is great, thanks. Could this pattern support returning data or a callback from the modal to the route or component that called it?

[@TravinskiyVladislav]

Thank you Dave

[@DaveGrayTeachesCode]

You're welcome!

[@Sylar7773]

Realy thank You for Your job!!!

[@DaveGrayTeachesCode]

Welcome!

[@shakthis-qy8su]

you are my awesome Dave

[@DaveGrayTeachesCode]

Thank you!

[@rajfekar1514]

thanks for this tutorial.

[@DaveGrayTeachesCode]

You are welcome!

[@aymenbachiri-yh2hd]

Thank you

[@nro337]

Great video!

[@DaveGrayTeachesCode]

Thank you!

[@DaveGrayTeachesCode]

Thank you!

[@eedeenet]

what if i dont want a fallback route /photo/1 should always open the modal?

[@evheniydan]

Did you find a solution?

[@ic0mad]

Is there a way for the exit animation on the modal to play? Right now the modal close instantly with no animation

[@ogt1407gabriel]

You the best

[@enziqflow4296]

Any idea how to implement it for dynamic routes? For example i have route app/ game/[id]/page.tsx - where i should open modal review/[id]/page.tsx target page it feels very buggy, and docs are not clear about it

[@emmanuelxs6143]

Great tutorial, loved it, can you implement said functionality with react and react router dom v6, i have been trying to do sth similar but can't find a working solution, thanks by the way

[@DaveGrayTeachesCode]

I will take a look in the near future. I'd like to cover RR7/Remix as they are merging.

[@emmanuelxs6143]

@@DaveGrayTeachesCode thanks, I really appreciate

[@Pptruenoz]

You should set the vscode toolbar to the right side or maybe hide it so we can see the code

[@DaveGrayTeachesCode]

I usually press Alt+Z so all code lines wrap - so they should still be visible?

[@mahmudulhasan7858]

Great ❤

[@vyshnav2488]

sonner and toast component when triggered inside intercepting modal does not pop up or is not visible

[@melkhywong7594]

can this works with shadcn sheet ui?

[@josephtan6018]

Hey Dave, Please make a playlist for Remix. It's much much better than NextJS. Thank you.

[@DaveGrayTeachesCode]

I've been wanting to do this. With their new announcements, it might be good to wait for the RRv7 merger.

[@w1erley]

Hello, can you please advise me how I can implement a modal like in twitter when creating a post? It seems to be the same, but when you reload the page, it doesn't show you a new page, instead it shows a modal panel with a dashboard in the background Same goes for the profile edit modal, when you click edit, it opens the modal with /settings/profile url, but when the page reloads, the modal is saved but the background changes to the dashboard I'd really appreciate your help.

[@DaveGrayTeachesCode]

You can load a modal without an intercepting route. Sounds like that is what you are describing.

[@Raul-wf6zf]

I am implementing a modal within a modal is this a good idea to do parallel routes?

[@DaveGrayTeachesCode]

A modal within a modal - I'd avoid if possible, but sometimes weird things are necessary. Parallel routes are a good idea for a modal - not sure about layering them.

[@abhim6380]

How is the coffee list still visible in the background of the modal in route /photo/1?

[@DaveGrayTeachesCode]

That's how modals work - they overlay the page underneath. The shadcn/ui Dialog component applies an overlay that has an opacity setting which lets you see what is underneath. You could customize it.

[@abhim6380]

@@DaveGrayTeachesCode but for the route /photo/1 the coffee list shouldn't be displayed. Only the modal should be displayed, No?

[@rahulchourasiya4148]

Can you please make a video for single sign on, like centralised authentication website using next-auth, without any workos or any paid library for multiple saas website

[@DaveGrayTeachesCode]

I might someday, but it isn't high on my list because Kinde gives you lots of features and up to 10k users for free. Makes it an easy choice for most of my projects.

[@rahulchourasiya4148]

@@DaveGrayTeachesCode we are developer, we build own tools instead of relaying other. Thanks

[@kazmi401]

@@rahulchourasiya4148 So go ahead Build your own Next-auth. why you are requesting to use it.

[@ivodelev9794]

Hi and thank for your video. I am still confused as what problem does this solve tho?

[@DaveGrayTeachesCode]

A modal will display over the current page. In Next.js, you can intercept a route segment and display it in a modal. In business apps, a common use case would be a page with a table of results. You don't want to keep submitting a form to see those results so you keep that page underneath while working with the individual records from the table in a modal that displays a form. Many other uses but this one is common.

[@rajfekar1514]

Please help me withn nextjs new authjs v5 login with both through Googleprovider and credentials login how to manage both login simultaneously through rest api login.

[@Bangladesh689]

Nice. Thanks. What if I have a link inside the modal like previous and next. Then after clicking these link the close button won't close the dialog instead it will keep going back to the history. What would you recommend?

[@Bangladesh689]

I know that router.push(specificPath) can solve this. But in my case I have login button on navbar and inside the modal I have link to sign up form as well. So I want when user closes the modal they go back from where they came from

[@DaveGrayTeachesCode]

Not sure that I'm following all of your specifics, but the handle function I introduced in this video should take a user back to where they came from.

[@lukavrtaric9918]

First, do not use the Nextjs component as links for prev/next inside the modal but buttons with onClick methods that use the useRouter() hook. And then when clicking the next/prev buttons do not use the router.push("") but router.replace(""), in that case, router.back(), when closing the modal, will work as expected, since router.replace() provides a client route without adding a new entry into the browser's history. Hope this helps

[@Bangladesh689]

@@lukavrtaric9918 I fixed it by passing the 'replace' prop to the Link component.

[@sujoykrhaldar]

Can we do this in React ?

[@DaveGrayTeachesCode]

This is specific to the Next.js framework. Next.js is a React framework.

[@larrymcfarlane6202]

Hmmmm...could be useful for a login form where a session/jwt expired.

[@ofeklevy1242]

NUM1

[@IbanTheOne]

I don't get the use of Shadcn or Radix UI Modal components existing HtmlDialog native component. It's just nonsense.

[@tareksiddiquenabil5403]

❤❤

[@anasouardini]

Isn't this just a pop up with unnecessarily changing the url? I'm failing to see a valid use case of this, a pop up with two buttons "visit" and "share" would render this feature completely unnecessary. Perhaps, Nextjs should've made their next/link easier to use like they do in tanstack router instead of baking new features that don't really affect the DX that much. Maybe I'm just too dumb to understand this.

[@thebilalafsar]

Bring the PHP course 😡😭

[@ericmensah9037]

Hello Dave at kzbin.info/www/bejne/fKWVoqZtqbSKZ80 when creating the modal component, since the props defaultOpen and open are boolean, I guess it'll be cleaner to just specify the properties because they'll evaluate to true by default. Thank you.

[@DaveGrayTeachesCode]

Yes in this case. In many instances, you would use a trigger to open the model and then it needs to be able to receive more than one value.

[@hadilibrahim4465]

Thank You 🤍✨️ source code, please ...

[@DaveGrayTeachesCode]

I will check - thought I had provided the link, but if not, I'll put it in there ASAP!

[@hadilibrahim4465]

Thanks ✨️🤍😍

[@Malcolm777-i]

🎉🎉🎉🎉🎉🎉🎉

[@toKrzychu]

Half the video had nothing to do with the modal - totally unnecessary stuff

[@Boss-gr4jw]

This is such a mess. Why in the hell would you need to create so many nested structures to build something simple. It's literally impossible to understand what belongs together when every component is spread around 10 different directories. Nothing makes sense here, absolutely no locality of behaviour, only technical non-sense.

[@DaveGrayTeachesCode]

Yeah, the Next.js App Router is opinionated about that. YMMV

[@alarafatsiddique9362]

Really enjoyed this, kindly apply this on form

[@DaveGrayTeachesCode]

Thank you! Will do!