Intercepting Routes in NextJs 14

in this video we're going to learn about intercepting routes in next js14 by building a photo gallery project where when the user clicks on any individual photo we're going to show a model by intercepting that request so instead of going to the photos for sl3 page which is a dynamic ID page we're going to show that content inside of a model this is intercepting that request and actually replacing it with this model and also using the uh parallel that we learned in a previous video uh on the channel to show this side by side so you can see this model is actually overlaying this Gallery context so we are not switching the context we're still in the context of our Gallery but showing a preview uh we can dis the model but if the user actually goes ahead and refreshes this page or punches this URL or shares this URL to somebody else and they click on it uh they would just go to the actual photos for sl5 or that specific ID page so so we're going to go through the documentation and some theories first and then we're going to jump into vs code and build this project from the ground up together but before I do that I just want to mention that I took the inspiration for this project from a project from the versel lab or verel team it's called Next gram it's basically the same idea so our project is a rebuild of that Gallery project by the veral team I'm going to include a link in the description uh this is just for us to learn how you are going to implement intercepting routes and combine it with parallel routes to create this model so now let's go back to our notes where we're going to learn about intercepting routes and see some diagrams and then we're going to jump into vs code and build the project together now the source code on GitHub for the project is going to be linked in the description so if you want to follow along or check it out you'll have it there now as I mentioned intercepting routes allow you to load a route from Another Part Of Your application within the current layout now this Paradigm or this concept is useful when you want to display the content of a route without switching the context so what this means is for example in this app when you click on this specific image which is a link that's supposed to take us to this Dynamic route of for/ photos2 which is the idea of this specific image instead of taking the user there and switching the context to that page we're still on top of this Gallery so the context the layout is the same and we just loading the content of another route which is this Dynamic ID route in a model here now in this specific implementation we're also combining this interception with the parallel route so we can render the gallery and this model at the same time together if you're not comfortable with the p routes we do have a video on the channel I'm going to link it in the description or in the cart somewhere um at some point in this project when we're building we're going to add the parallel route so you can check that video out uh and learn how that works and how uh we combine it here with the interception so here again a visual example we are clicking on a photo inside of a feed for example in a social media app you could display a preview of this photo just like how you're doing overlaying the feed uh where nextjs is actually intercepting the for Slash photos one 2 3 this is going to that specific Dynamic ID folder it's intercepting that and then it's overlaying it over defeat but again if the user navigates to the photo by clicking on a sharable link or refreshes the page they go directly to the photo page this time without seeing the model now the way that we create this intercepting routes or the convention to create them is by this um syntax which is similar to how you would write relative paths in your file system so it's similar but it is for segments and not for folders that's an important note here later on we're going to see how that plays out but before we get there to match the same level segment you can use one dot inside uh the curly braces or parentheses or brackets the two dots is going to go one segment above the two together is going to go two levels up and the three dots it's just going to match the app folder or your app router now here in the same example of having a feed and also a photo we're intercepting the photo segment from within the feed segment by creating this uh photo directory so let me just make this a bit bigger so inside of our feed we had a layout and a page this is where we're showing the the gallery and we have a dedicated photo and the dynamic ID page outside of this feed but what we are saying here is that when we are inside of our feed layout if the user is trying to navigate to the photo ID we want to intercept that request and actually show whatever content that is in here which is this intercepting route that's going to match the same thing as photo ID page photo ID page so it's going to intercept that request and here it's going to show a model instead of going to that page again a little note here that this convention is based on the route segments and not file systems you're going to see what this means when we're using um the parallel routes because for creating parallel routes we're going to use slots with the at sign symbol in the beginning of the name of the folder which is not going to create a segment it is a folder but it's not going to create a segment and that's how they differ here let's actually go back to the documentation uh by the way these images and my notes are um what I synthesized from the documentation I'm going to also include the link in the docs that's your best reference now here uh we're going to actually look at this code which is for this feed and photo example from the nextjs docs um when you go to the intercepting section or intercepting route section in the docs can just scroll down this modle example is also there as you can see here uh inside of our feed now we're putting this photos intercepting route inside of a parallel route and the reason why we would want to do this and we're going to see this in our own project as well is that we want to show this model on top of that Gallery if we don't do this well it's going to intercept the route and it's going to show the model but the gallery is not going to be there because you're intercepting the route and you're showing something else there now to show them side by side which is why you would want to use a parallel route in a nutshell they just going to allow you to render multiple Pages simultaneously in the same layout it's exactly what we want here and we're going to put everything inside of a model so we're now receiving this model P route also inside of the layout in the feed and then we show them side by side so as you can see here inside of this intercept that route we're showing it uh the content of the photo inside of a model whereas if the user just go go to directly to that specific photo page they're going to see the photo page and not the Moto now again I want to touch on this convention to match segments so here as you can see this intercepting route here for the photos uh with the two dots it's going one level up now you might think if I go one level up I'm going to be at model I'm not going to be at the same level as this photo to intercept again this is not matching for folders it is matching segments so even though it's similar to your relative path in the file system this is matching segments and because this at model is a slot and slots in par routes do not create a segment the first higher or upper level from here is going to be the feed which is at the same level at this photos and this is why this is working and intercepts the request to the photo so this is this note here just pay attention that it's different from your folders it's just mapping or matching segments when you're using intercepting routes now the last thing I want to mention is that to complement or to complete this example from the docs you can also go to the parallel routes documentation scroll down at the end of the page there's also another model example here that's for Au or a login model but you can see some conventions there in terms of how you would receive this parallel in the model working together with the intercepting so we can combine the two um examples together now with that out of the way let's jump into the code and build this project from the ground up so we can just put this uh things that we learned into practice so I started with a brand new nextjs app that's using typescript and T CSS and all I had done so far is that I remove the content of the homepage that comes out of the box this component that you can see here that's showing the this H1 tag of intercepting routes and this link that goes to our for/ photos page I haven't created that page yet we're going to create that together let me show you what else I have done and then we're going to come back to the structure of our app and how we're going to go about building it now I have also created this lip folder where we're exposing some photos this is again coming from that project from their cell team to actually render some photos I'm exporting some type for our photos as well and I've created two components one is a photo card that shows an image and some information about who this photo was taken uh by so we're going to use this photo card um inside different components and I have this model which we're going to use to render the content of our uh preview image when we are rendering it on top of our Gallery I'm going to explain the details of how this works later on when time comes to use it but for now just know that this is the starting point of of our project now inside of our app inside of our page we're having a for/ photos now the structure of our app is going to be a bit different from the example that we saw in the docs where we had a feed to show the gallery of the photos and then we had a separate folder for the photo ID Dynamic route what I want to create is to have the for slash photos so we can see all the photos and then inside of it I'm going to include a dynamic route to see a specific photo phot so for/ photos and then SL1 2 3 the ID and then I'm going to also include the intercepting route inside the photos to intercept itself when the user is trying to go to an individual photo from the all photos page let me show you this diagram to make it more clear so inside of our app we have this all photos this is what we want to create inside of it we're going to have a page. jsx this is responsible for rendering all the photos then inside of it we're going to have a folder with this Dynamic ID route where we show individual pages so this is for when a user just directly goes to this for/ photos SL1 they going to be served the that specific page but when we are inside of our photos so when we are inside of this page where we seeing the gallery and the user clicks on one of the images to go to for/ photos ID we we want to intercept that route and that's how we're doing it here we're intercepting that request and showing a model so inside of this photos intercepting route ID and Page we're going to put the content of our specific image in a model okay so this is what we're going to do and then later on we're going to add the P route for the model to also show them side by side so let's go back to our application and create the first thing which is the photos folder inside of it I'm going to include a page. TSX and I'm going to copy some code to render our photos page so let's switch back to our application let me close this off now here all I'm doing is I'm getting the photos from my lip folder I'm mapping over each photo and for each one I'm showing a link and an image and this link is going to for/ photos and that specific ID so now let's let's go to the all photos page so now we seeing all of our photos now when I click on each one of them I want to go to this specific photos ID Dynamic route so let's create this Dynamic route so inside of our photos I'm going to create another folder which is a square brackets ID this is a dynamic route I'm going to pay include a page. TSX inside of here and copy some code so let's just again close this inside of our photo page we're getting the prams from nextjs we're going to get the ID out of it we're going to filter our photos to get this a specific photo and now I'm going to show uh this specific photo on this page using this photo card component that we just looked at this is again is going to get a photo and it's going to render an image we just close this off okay so let's test this out if I click on any of these images it's going to take me to for/ photos SL1 which is the actual page rendering ing this content with this photo card and then I can come back to photo so up until now we're not intercepting any request this is just regular stuff from nextjs to have an all photos page and an individual Dynamic page for these images okay so now let's create an intercepting route inside of our photos folder let me close this off so at the same level as I as my ID I'm going to include or create another folder that has double dots and then photos and inside of this I'm going to include a bracket or a dynamic ID and then inside of this I'm going to include a page. TSX that's responsible for rendering the UI let me close this off so inside of this photo model this time I'm getting the prams and the ID again filtering through my photos finding the photo I'm rendering that same photo carard component that we have had at the page level but this time I'm just rendering it inside of this model okay so now let's test this out if I click on any of these images instead of taking me to that individual Dynamic ID page it's showing me this model so we have successfully intercepted that request for that Dynamic ID page and replaced it with this model that's rendered by this component let's review one more time what happened here let me make this bigger and close all the files so we had inside of our app folder we had this photos folder we had the page. TSX in photos this was responsible for rendering all of the photos or our Gallery here we had this Dynamic ID route which was responsible for rendering uh the individual photos so I can show you by refreshing the page this was the individual photos page and then we included this intercepting photos route here to say hey if you're inside of the gallery and the user clicks on one of these images to go to that individual page just show them this preview model so we intercepting that request instead of taking them to that page we're showing them this model but if they directly go to that link by clicking on a shareable link or refresh the page they can actually see that individual page just like how I did it now so now in this case for this photos intercepting route and I the inside of it this was where we were just showing the the content of this photo card inside of a model and that's how we did it here now you might notice that we not seeing uh the gallery here this is not overlaying that context it's just showing the model we're going to come back to this when we combine this with a p route but before I get there I just want to quickly mention how we're closing or dismissing this model so let's go to our component where we are actually creating this model let me close this off so this is using headless UI to create this Transitions and this dialogue or model component from headless UI um I'm going to include the link in the description so you can check it out but all we doing here is rendering a dialogue and I'm accepting a children whatever you pass to it is going to be rendered inside of this uh dialogue now typically for a model you would have local state here uh and then uh you would have this handle close pointing at your state to say is the model open or is it closed if it is open just close it so that's how we typically in a react app um control a model but here we're not using a local state instead we using the URL and instead of U setting the local state to false or to close the model we're just using the router to go back because when we go back using the router from the next navigation or the next router it's just going going to go back to the for/ photos where we didn't have this model so look when I click outside of this model it just goes back to for/ photos where we are rendering all our photos and when I click on this this is the interception or intercepting route in action it just masks the URL shows the URL as photos 4/2 but it's not actually going to that page yet it's just showing the model so if you're intercepting that request and only if I hard navigate to that uh link or refresh the page we're going to be taken to the content of that uh individual Dynamic ID page so I hope you understand uh this implementation now let's actually uh combine this with parallel routes so the problem was that when we are inside of a photo and when we click on it it shows us our model but we can't see the gallery here so we're going to use P routes uh to actually render both of these Pages simultaneously together again P routes in a nutshell allows you to render multiple pages in the same layout at the same time and this is going to be a very good example of using p routes to show this model on top of our photo gallery page so what we're going to do here inside of our photos page I'm going to create another folder I'm going to include an ad sign in the beginning this is how you would create slots or parallel routes inside of the app router uh these slots are not going to create segments it's just going to be a pet route inside of it now inside of here what I'm going to do is I'm going to bring all the contents of this intercepting route inside of this slots now so instead of having this intercepting route being directly inside photos I'm going to move it inside of my model okay so let's see what happened here we copied the content of our intercepting routes into this at sign model or into this slot which is going to allow us now to get the content of this pet route and show it side by side inside of our photos route so inside of our photos where we had this page. jsx we can now include a layout. TSX and here I'm now going to receive the content of this model again if you're not comfortable with P routes just watch the video that I mentioned uh besides the children that you're going to get inside of your layouts using p routes you're going to get this slots as well well so I'm now rendering them side by side which means I have my all photos page that's the gallery and then I'm going to also show the model side by side or overlay that Gallery so let's just refresh our app to test this out now as you can see this is giving me a 404 even if I go back to the homepage I can see the homepage but if I go to the photos I'm not receiving these photos this is because we have to have a default for this P route meaning that if this model or this par route is not active we want to have something or some UI to show and if we don't have that default. JS or default UI nextjs is going to uh render a 404 so to fix this inside of our at model slot we can include a default. TSX and when you don't want to uh return anything from your default UI you can just return null and as you can see here when the model is not active when the parallel route is not active we want just to return nothing or have a default to return all otherwise nextjs is going to return a 404 and when the model is active we're going to show that actual model with a preview of our image so now if I click on any of these images now you can see this model is overlaid on top of that Gallery so we are keeping that context and what allows us to to do this is this parallel route of model which is going to allow us inside of this layout to render the content of the all photos page which is the children and this model side by side or one over top of the other uh using this P route so two different concepts of intercepting a route uh which was the first step that we did uh so instead of showing the actual individual page we show the model but in the first step by just intercepting that request and replacing it with the model we didn't see the context or the gallery underneath because we're just swapping or replacing the content of our page with this model but we combined it now with this P route that's going to allow us to show these two pages simultaneously so we intercept the route from one hand and keep that underlaying Gallery page underneath and show them all together now again if you dismiss this model it's just going to hit router doback to go back to the all photos page and then once you click you see this if you refresh and hard navigate to this specific page you're going to see this individual page now let me just also show you in the diagram so this was the first implementation where we had this all photos we had the individual ID Dynamic Pages we intercepted those requests saying hey if you're on the gallery page and somebody go wants to go to that specific ID page or photo page just show them a model first and in the second implementation here we added uh this P route to say hey if you're showing that model just put this intercepted route inside of a model component or inside of a model slot and show this side by side in in my page in my layout sorry in the all photos so that model is just showing or laying on top of our photos gallery again I want to mention this default. JS so in four par routes when they're not in active state or they're not matched you have to have this default to tell nextjs what to render uh when this is not active if you don't want to render any UI just return null from it because if you don't have that default. TS or JS file nextjs is going to render a 404 because there's nothing matching that specific segment or that specific slot and that's R for this lesson folks we learned about intercepting routes which is an advanced routing technique in xjs to intercept a request and show the content of that route inside of a model or in the same context in the same layout without the user having to switch the context we also combine this with the lesson that we had on Parallel routes to show or render multiple Pages simultaneously at the same time so we can overlay the model on top of our photo gallery page now that's it for this lesson and I'm going to see you in the next lesson bye-bye

Channel: Hamed Bahram

Views: 10,947

Keywords:

Id: RKszSrtWqjA

Length: 25min 0sec (1500 seconds)

Published: Sat Dec 23 2023