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

parallel and intercepting routes can work together in nextjs to not only provide a modal window but also provide a fallback route segment let's check it [Music] out hello and welcome I'm Dave today I'll help you understand how parallel and intercepting routes can work together in nextjs and I'll provide links to all resources in the description below hey everyone I'm Dave and before we get started with today's tutorial I am back from a 7-Day vacation with my family no computers you can see I've still got the 7-Day beard here that I usually have shaved and I just want to take a minute to say I'm thankful for this industry for software engineering computer science web development all of that where I can provide a vacation like that for my family and I hope I'm helping you get started or continue in this industry and if I am please leave a comment on this video I always like to hear that feedback whether I'm helping you get your first job or there's some I've heard from that I'm helping that are already working in the industry I just love to hear that feedback it also helps if you give the video a thumbs up and of course if you haven't yet subscrib and now let's get started with today's topic today we're going to look at an advanced pattern in nextjs where we use a parallel route and intercepting route in combination to provide a model and then the fallback is the original route segment that would have been displayed if we hadn't intercepted it now in my last video I already covered nextjs parallel routes so if you haven't watched that that's really a prerequisite for this video I'll provide a link to that right now and also a link to that video in the description it's fairly short and we'll get you up to speed quickly so if you haven't seen that watch it now and then come back to this video I'm also going to use the Shad CN UI library and the dialogue component that it provides to create the modal so I'll walk you through that step by step let's get started all right I'm in vs code and to save some time I've already started a nextjs project but I haven't added the parallel or intercepting routes yet or the modal so we'll create all of those today but first let's just look at what I've got to start with and of course you can download the completed code at the link in the video description so what I've got to start with is a nextjs project and I'm using currently the latest nextjs 14.2.2 now the release candidate for nextjs 15 has been announced but it's not the stable version yet so when you install the latest at least as of today you still get 14.2.2 so that's what I'm going with now after that let's go ahead and look at a couple of other configuration files one is the next. config.js file you'll see a couple of things I've added one is the experimental stale times and this is something that's getting updated when they switch over to the stable version of NEX js15 where you will have the opposite essentially wouldn't have to set this but right now I've set Dynamic to zero so anytime I use a link that it's not going to be cached and then the static is 180 but I've just got the dynamic to zero here you can do this to your preference if you want to other than that I've also got in a remote pattern for the images if you've worked with images in nextjs you know you need to do this if you provide the full URL and I'm just hosting the images with the project so they're really at Local Host with Port 3000 but I need to provide this remote pattern because that's how I set it up and I'm providing the full URL in the source of the images now next we can see where the images are and they're in the public directory as you might expect I've got three pictures of coffee here which I love americanos so I've got three pictures of americanos a couple of hot and one iced and then after that I want to point out that I'm not using an external server I'm just mocking that essentially with Json server and for that I've got a data folder and images. Json and I'll show you how to start the Json server if you're not familiar with it but here is the Json file and it's got this images property here that has an array and then it's got this data so we're going to start that as if we're requesting data from a server we'll pull all of this into the project so let me show you how to start Json server if you're not familiar and it looks like I need to go ahead and exit the project and maybe I had Json on server running I did so I need to exit that as well okay so we'll start from scratch here and I'll put clear just to clear all of that out so now we don't have Json server running we don't have the project running I'm going to type npx json-server now a couple of flags here dasw for watch and we're going to tell it to watch the data folder then look at the images. Json file we're also going to say- P for Port because by default Json server would start on Port 3000 that's also where we run our Dev example of our nextjs application so let's just move it to Port 3500 now when I press enter we should get a response from the Json server that yes it has found our images and that's where they're available at so now it is running so if you haven't opened a second terminal go ahead and click the plus sign here to open a second terminal window and then I'll go to my second terminal here where we can also clear this out and start over and I'll just Ty mpm runev to start our project and now our next JS project should be at Local Host 3000 I'm going to press controll and click on that to launch that in the browser and I'll see if it is launched in my browser here and here is the example project you can see I've got a coffee feed with the Americano pictures so just the homepage is a essentially a feed of these coffee images now when I click on any image it will take me to the route segment that will display just one image so I can do this for the second Americano and here we are if I go back it would do it for the third one as well or I could do it for the first one you can see how this works and I'm clicking the back button here but I could click the header as well to take me back to the feed and that is our basic example project so we have a feed and then we can click on any any image then we go to the route segment and display that but we really want to display the images in a modal instead of going to that route segment we will use the route segment as a fallback but we're going to intercept that route and display these images in a modal okay we're back in VSS code go ahead and stop the project if you haven't or stop the application with control C now we need to add Shad CN to our project because we're going to use that dialogue component that it provides to create create the model so let's go ahead and do that now we'll type npx Shad cn- UI at latest and then also type init and press enter once we do that it should ask us some questions after it pulls in the library I'm going to go with the default that's fine I like the stone color you can pick whichever theme you want to to get started here and after that yes I want to use CSS variables it's going to add several files to our project if you haven't worked with shad Cen if you have you're already familiar with that but I also have a video tutorial on getting started with shad CN that you can find on my channel I'll link to that in the description as well okay it is initialized shad CN let's go ahead and take a look now at our project there's one change oh I didn't add the dialogue because with shad Cen you not only have to initialize it in your project you have to add in any individual component that you want to add want the dialogue component let me open that window back up with control and back tick to open the terminal window I want to type npx Shad cn- UI once again at latest and then we'll type add dialogue and this will add the dialogue component for Shad CN and then we'll of course look at our file tree to see what it is added and I'm going to make one other change I just like to apply dark mode it's a little easier on my eyes okay now we added that let's look over here at the tree and you can see we now have a components directory and a lib directory so it adds utils.py do want to change is just by default I'm not going to apply the light and dark mode however if if you want to do that I have a video on that you can find on my channel but what I'm going to do quickly is just override the light mode here where it has root so I'm going to scroll down to where it has the dark class and I'm going to delete this I'm just going to put root here as well so this root below the one from above will override that so now it's just going to apply this as the root which is dark mode so just a shortcut this totally eliminates the light mode though so if you want to have both in your project or be able to toggle those look for my other video which of course I can link below okay that said I'm going to close this Global CSS directory let's look at how the application is set up so far and I'm collocating some components that I didn't put in a components directory notice like the header component here is just right here in the top level of the app directory alongside the page and the layout so when we look at the page here what I'm doing is pulling in this photo display component and then I'm looping through that with all the images and I'm displaying each one inside the photo display component so we're going to reuse that when I get over here to the photo route segment then we can see it receives a photo ID so if we look at that page we'll get that photo ID in a pram let me go ahead and wrap that down so you can see here's the props here is the prams and we're receiving the photo ID it's fetching all of that data from our Json server here Local Host and Port 3500 where we started it also set the cache to no store doing everything I could to override that default caching and then after that if we don't have a photo for the ID that's provided of course we want to cover that with no photo found for that ID so at least we're returning something otherwise we'll display the photo inside that same photo display component that I have collocated here as well and here is the photo display component and I could also altz just so that wraps down and you can see everything but it's essentially using a link here wrapped around a div and the image component from nextjs so that's our photo display component and you can look at all of that I'm not going to go into each detail there because that's not really what we're focusing on what we want to do is intercept this photo route but at first what I need to do is create a parallel route so inside the app directory let's create a parallel route and we'll call this modal now remember parallel routes start with this at symbol that we have right here so I'll press enter there now after that we also need to create a default file inside of this parallel route or nothing will work now in this instance we're going to intercept the route so the default file won't be the fallback if you want to learn more about those default files remember to watch my parallel routes video that I said was a prerequisite to this one because I go into more detail about those however in this instance we need the file nextjs wants the file or it won't let anything work but however we don't have to do anything with the file other than return null so let's set that up I can just say export default function then say default then inside this function I can just return null so this file essentially does nothing other than it's required by nextjs for all of this to work okay and one more step with a parallel route that is easy to overlook let's go to the layout file because we need to add our parallel route to the layout so here inside of the root layout is where we're working because we're just intercepting that one route and it's right here at the top essentially let's go ahead and put in the modal and then after that we also need to add it here so I'm going to shift alt and the down arrow to copy down the children and switch this to the modal as well because it is also a react. react node here as far as the type goes then we're going to render that here in the body and I want to put the modal right above the children and below the header so there is the modal as well so remember when you create a parallel route that you also need to add it to whatever layout you're working with there in your segment and in this case we're in the root layout of this project so let's save that and now we can create the intercepting route to work with this and there's some conventions there that can be a little confusing so let's quickly look at the docs I'm in the nextjs docs on the intercepting routes page and I'm at the convention subtopic here now this is what can get confusing when you set up an intercepting route it's what uh parentheses and how many dots to use essentially it says intercepting routes can be defined with the parentheses do do convention which is similar to a path that would have the dot do slash when you import something except we're putting these dots in parentheses so one dot matches a segment on the same level that's what we're going to use today don't count the parallel route directory that starts with the at symbol that is not a level that's ignored it's not part of your route it's just used to identify the parallel route in nextjs so we'll be using one dot however I've often seen it with two dots that would be matching a segment one level above and now look at this in instead of adding two dots slash and another two dots it's a set of parentheses and another set of parentheses both with two dots to match two levels above but if you are down into a subdirectory and you need to match something in the root app directory you're going to use three dots now that's a little confusing because we're also kind of working in that root app directory as we went right into a segment however we're on the same level so we're going to use one I just want to point all of this out and you have to experiment with us a little bit if it's confusing and I'll link to the docs for the intercepting routes in the video description also okay we're back in VSS code and now we're ready to create this intercepting route so it's going to be inside the modal directory so I'll create another new directory and I'll start with parentheses. parenthesis and now I want it to match the photo directory so at this point I'm going to type photo right after that now everything else here needs to mirror what we have in our actual route segment here that is photo so after that we had a photo ID that was a pram here that's accepted so we need to add that as well so we'll also create a folder that is photo ID here inside of brackets not parentheses and then after that we had our page. TSX file and the photo display now we don't need to recreate the photo display component I collocated it here so we'll just import that but let's just copy this page. TSX file and we'll need to make a few changes because the Imports will change but we can still create a page. TSX file right here and then we can paste this in and just make the necessary changes as some things won't be in the same place and other things we won't really need to recreate so let's go ahead and get started with that instead of this import photo display here if I just start retyping it it should find where it actually is you can see it's a much longer path and then this type that we have here we created that type in the other file too so we could just delete this now we could say import type and we could have photo data and it will import it from where we'd already created it so we don't have to recreate everything but I'm basically going to stop there of course you could uh stop recreating the type props or anything else you want to work on as as well but I'll stop right there now we essentially have the same page we haven't created the modal yet so now that we intercept the route and we essentially have mirrored the route now we want to apply a modal to this intercepted route now to do that I'm going to scroll down to the components directory and I'm actually going to use it and not collocate this component so I will put it inside of the components directory so let's create a new file and let's just call it model. TSS now inside of this we'll immediately start with use client because this will be a client component now I'm going to import dialogue from let's find the right one so we want it to be from Shad CN so it would be the UI dialogue but we also need a couple of other Imports here as well so I'm going to put these on separate lines so what I'm going to do is put each import on a new line here so I'll have dialogue and then I want dialogue overlay and then I also want dialogue content so we've imported all three of those now from Shad CN now there's one other import we need and that is use router so we're going to get use router it's going to come from next navigation okay we've imported everything we need I'm going to say export function model and now this modal is going to receive children like we would in a layout now after that of course we need to provide the type so let's go here and we'll say this type is children and this is a react. react node just like we saw earlier in the layout file that we were working with okay we've provided all of that but we don't have a return yet so it still doesn't like our modal inside of here we're going to say const router equals use router capitalize that now that we have our router we also want to create a function that just handles the open change for the model so we'll call this handle open change after that we've got our Arrow here and then inside of this function all we're going to do is call router doback now why would we do that when it closes well it will change the url bar so then it won't still be displaying the specific image URL it will go back to displaying the previous URL so that's important as well hey now now we're ready for our return in this component so we'll have return our parentheses let's start with the dialogue component itself now the dialogue component is going to have a default open we're going to set that to true now a lot of times when you're working with a dialogue or model you would have a trigger that would open it we want this one to open by default so we set that to true but because we're using the handle open change function as well we also need to set open to true so now we've set both of those and after that we'll have our on open change so I guess that's the actual API function and I named the other one handle open change just out of habit I guess I create ones called handle you could name it whatever you want but handle open change is recommended or at least that's what I usually default to my naming pattern I'm going to press alt Z just so all of that shows but onopen change is the actual name that is with the API here from the dialogue so I misspoke about that earlier after that we want the dialogue overlay it's not going to have any props we just need that to wrap everything else and finally we have the dialogue content now after we have dialogue content I'm going to apply a class name here so class name equals inside of this I'm going to say overflow - y- hidden so anything that would overflow would be hidden instead of displaying or or having a scroll bar I don't want that with this particular model you could style it of course according to how you want it now after that we just need to have the children here and that is our complete model using the dialogue component from Shad CN and there's more you could learn about the dialogue component and I'll link that to that below as well but this will provide a nice modal it will allow you to click away and it will close and it will adjust the URL as we expect it to be okay now we're ready to apply this model to our intercepted route so all we need to do is go back to our intercepted route and the page. TSX file that we have let's import this model so here we go import model and there it is at components modal and after that we need to wrap what we have here inside of the modal but we really don't need this div with the class names I had provided when it was a static page so I'm just going to delete the div that we have wrapped around everything and instead replace it with the modal component so we have the opening and closing I'll put the closing one of course after save that and we should be ready to check out our application so let's open this up and go ahead and type npm run Dev if you don't have the project started quickly look at your other terminal window to ensure that the Json server is still running we can request that data from the mock server and now the project is running at Local Host 3000 I will control click to get that going here's the application in the browser I'm going to recommend that you hold down the shift key and refresh just to make sure you don't have anything cashed in your browser window could be unexpected and you might not get the modal but what should happen is if you click on one of the images you should now get a nice model that has our photo display component inside so you get the title and the image and this should happen for each one of these images now when I say we have a fallback notice the URL does change and it says photo 3 here and when I close it changes back just to our Local Host 3000 which would be our homepage but when I say fallback for example if we were to refresh the page while it says photo SL1 we're going to get that original route segment and that would be our fallback so now we have the page that has the image displayed as we previously did before we added that model so now I click the top here that says the coffee feed to go back to the homepage and now when I click an image it should once again show this so this is very useful especially say you're working in an application and you wanted to copy the URL and send it to somebody it would work they would just get the full page without the model otherwise if they go to the application and use it as intended you'd click on the image and you would get a modal so you stay on the feed and that's what modals are useful for now of course there's many other applications or ways to apply a model I should say one of the most popular ways in business applications is to have a form in a model let's say you have a table of data results for something underneath and you want to keep those results continue to work with those results so you don't have to search those in another form every time but you want to pull up individual items from that table and possibly be able to edit those so you would typically see something like react table underneath then you would be able to click on one of the items and it would launch a model with a form for all the data of that item so let me know if you want to see another tutorial that has a modal with a form and some Advanced things that can come up when you're working with a form and a modal it's one of the things I've had to do at my job many times and I like how nextjs handles that I've worked with one just recently on a project at work so let me know in the comments about that and I hope this tutorial has helped you hey guys giving a quick shout out to my patrons holy coder is a progress provider and lad is a member at the senior level also thank you to all of the junior members you're all helping me reach my goals and if you haven't checked out my patreon it's got exclusive content and early release content and it's not one of those patreons that doesn't get many posts I'm active on there every week so please check it out if you haven't remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 9,734

Keywords: next.js modal, next.js modal routing, next js modal dialog, next js modal window, next js 14 modal, nextjs, next.js, nextjs 14, next.js 14, next.js intercepting routes, next.js parallel routes, nextjs intercepting routes, nextjs parallel routes, shadcn/ui, shadcn/ui dialog, shadcn/ui modal, shadcn, shadcn modal, shadcn dialog, shadcn ui, shadcn ui modal, shadcn ui dialog, nextjs modal, next.js dialog, nextjs dialog, next js modal popup, popup, modal form nextjs, modal, dialog, js

Id: Ft2qs7tOW1k

Length: 25min 58sec (1558 seconds)

Published: Fri Jun 07 2024