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 :)
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!
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.
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!
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
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 ❤
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.
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.
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.
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.
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
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!
Somehow when I implemented this in my real-world project, the @modal is not intercepted; it's redirecting me into the /route/[id] and not showing the modal. :( Anyone have any idea how this happened?
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.
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.
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.
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.
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?
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
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
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.
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.
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
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.
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.
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.
@@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.
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
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.
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.
Hello Dave at ua-cam.com/video/Ft2qs7tOW1k/v-deo.html 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.
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.
While I can see how this is useful, I could suggest at least 2 easier ways to implement this. I'm not sure why they made it so complicated. Parallel routes are kinda useless, in my opinion.
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 :)
Thank you for the kind words! I'm glad you like my content even though I have not covered Spring Boot!
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!
Thank you so much!
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.
You're welcome!
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!
That's awesome! Glad I could help 🙌
you dropped this when I needed it. i've read the documentation but I didn't understand that much thanks for the video!!
Glad it was helpful!
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
yes Dave, we want to see the video about a form in a modal
Thank you!
Me too. Although I think Ive figured it out, an example of modal login and sign-up forms would be greatly appreciated.
I appreciate your hard work to bring us such a high quality content. Thank you Dave!
You're welcome!
Love this short, and precise content!
Love the 7 day beard Dave, you definiely deserve it all the work you in
Thank you!
Hi Dave, I get very excited when you upload new videos on UA-cam, thank you once again for your invaluable tutorials
Glad you like them!
Great content, many thanks sir. Learned so much things from your valuable channel
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 😁✅
You're welcome!
Thank you so much, Dave! Modal was kicking my ass
Enjoy your vacation, cheers to this industry!
Really enjoyed this, kindly apply this on form
Thank you!
you are guiding in a very understanding way.
Thanks for the content Dave - would be great to see your approach to editing data tables with modals in NextJS 🙌
Coming this week! 🙌
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 ❤
You're welcome! Good use cases!
Hello Dave! Thank you
Привет Дэйв! Спасибо за интересное видео. Очень жду новые выпуски. Ты потрясающий учитель. Спасибо, что делишься своими знаниями со всеми нами.
Thank you so much dave i really need this concept and you just drop a this video, how lucky I am
Right on time! Glad I could help.
As always when I needed most
Happy to be right on time!
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
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.
Hey Dave Gary. Very helpful! I would love to see you making a video also about intercepted-searchbar 🙋♂🙋♂ thank you in advance.
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.
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.
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.
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.
Thanks! And yes, I want to do that!
Is there a way for the exit animation on the modal to play? Right now the modal close instantly with no animation
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
what if i dont want a fallback route /photo/1 should always open the modal?
Did you find a solution?
Hi. Anybody knows how to prevevnt feed page scrolling up when modal window appear?
sonner and toast component when triggered inside intercepting modal does not pop up or is not visible
Yes. Modal with react table. I need it😊
What if we don't want to redirect when the page is refreshed ?
This is great, thanks. Could this pattern support returning data or a callback from the modal to the route or component that called it?
Very useful for ux!
Agree!
Realy thank You for Your job!!!
Welcome!
Thank you Dave
You're welcome!
Great video!
Thank you!
Thank you!
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!
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!
@@DaveGrayTeachesCode happy to share ideas. You on Discord?
Somehow when I implemented this in my real-world project, the @modal is not intercepted; it's redirecting me into the /route/[id] and not showing the modal. :( Anyone have any idea how this happened?
Double check the route. It is easy to not indicate the correct level like .. or similar.
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.
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.
You can load a modal without an intercepting route. Sounds like that is what you are describing.
How is the coffee list still visible in the background of the modal in route /photo/1?
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.
@@DaveGrayTeachesCode but for the route /photo/1 the coffee list shouldn't be displayed. Only the modal should be displayed, No?
you are my awesome Dave
Thank you!
crazy! please can you do the other application of the modal ((:
can this works with shadcn sheet ui?
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.
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?
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
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.
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
@@lukavrtaric9918 I fixed it by passing the 'replace' prop to the Link component.
thanks for this tutorial.
You are welcome!
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.
I am implementing a modal within a modal is this a good idea to do parallel routes?
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.
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
I will take a look in the near future. I'd like to cover RR7/Remix as they are merging.
@@DaveGrayTeachesCode thanks, I really appreciate
Thank you
Hi and thank for your video. I am still confused as what problem does this solve tho?
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.
You the best
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.
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.
@@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.
Can we do this in React ?
This is specific to the Next.js framework. Next.js is a React framework.
Great ❤
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
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.
@@DaveGrayTeachesCode we are developer, we build own tools instead of relaying other. Thanks
@@rahulchourasiya4148 So go ahead Build your own Next-auth. why you are requesting to use it.
I don't get the use of Shadcn or Radix UI Modal components existing HtmlDialog native component. It's just nonsense.
You should set the vscode toolbar to the right side or maybe hide it so we can see the code
I usually press Alt+Z so all code lines wrap - so they should still be visible?
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.
Hmmmm...could be useful for a login form where a session/jwt expired.
❤❤
Hey Dave,
Please make a playlist for Remix. It's much much better than NextJS. Thank you.
I've been wanting to do this. With their new announcements, it might be good to wait for the RRv7 merger.
Hello Dave at ua-cam.com/video/Ft2qs7tOW1k/v-deo.html 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.
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.
🎉🎉🎉🎉🎉🎉🎉
Bring the PHP course 😡😭
Thank You 🤍✨️
source code, please ...
I will check - thought I had provided the link, but if not, I'll put it in there ASAP!
Thanks ✨️🤍😍
NUM1
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.
Yeah, the Next.js App Router is opinionated about that. YMMV
While I can see how this is useful, I could suggest at least 2 easier ways to implement this. I'm not sure why they made it so complicated. Parallel routes are kinda useless, in my opinion.
Half the video had nothing to do with the modal - totally unnecessary stuff
way too complicated for such a simple thing
Really enjoyed this, kindly apply this on form
Thank you! Will do!