Understand NextJS 13.3 Route Interception and Parallel Routing in under 6 minutes!

hey guys uh I did not have this video planned but I was going through the next year 13.3 updates and I found a very interesting uh update for parallel routing and interception so basically uh they have introduced a new um Dynamic convention um so it allows you to implement Advanced routing these features enable you to show more than one page in the same view like with complex dashboards or models uh with parallel routes you can simultaneously render one or more pages in the same view that can navigate independently they have shown a very basic um idea over here they have a layout uh they have a user a slot they call it and team slot and you can conditionally render Which slot to show up on the layout uh so this this is a very basic uh way of how to use it but the more interesting way I found out over here was using Moon tiles which they have I've seen they have it on nextgram uh this repository so I cloned the repository and I was looking through the code over here it's Zoom it and very much and so this is a go through this uh quickly so the this is the front page what so just see what happens over here all right when I these are images which are rendered on this page if I click on an image see the URL changes to slash photo slash one and now if I refresh this page it is the page of its own so basically what they're doing is they are intercepting that photo slash one route which is supposed to go over here they are intercepting it over here and then rendering that model inside the layout I'll explain it in more detail we'll just go over this sales.js this is the home page uh it is taking all the photos from door uh this photos.js file um then what they are doing is they are rendering all these images uh over here and they're linking the images to slash photo slash that ID which is slash photo slash ID so generally it should have basically gone to slash photo slash ID slash page but with the new uh intercepting route system this is a slot and they are rendering this knot inside here so basically this is the equivalent of doing something like children and modal and they are entering this model over here so children any page uh inside well this rule can come in as a children you don't need to specify a slot for it by default all the pages go into add children at that page.js else and we also want to render this model over here so what now it is happening is slash photo slash one is basically rendering inside this layout so it's saying let's render the modal instead and it is intercepting this photo slash ID so how they are intercepting is it says the convention is to use the dot dot convention uh with parenthesis outside it and it is saying anything inside slash photo slash IDE should be intercepted and then rendered as a model so they are rendering this modal which is a basic model page um it is a client component which is being rendered over here and basically what they're doing over here is just rendering a modal and they're using the router somewhere yeah so on dismissing uh the model they're going back so the uh the advantage of this is you have URL routing now so if you click on this and you can just you have slash photo slash one you can just go back now and you have gone to that page it emulates something like how Reddit works so if you go to reddit.com and then you click on well um some page over here this is a model right now if I refresh this page they've changed this but um if I go to my Reddit and if I click on this now this is a modal which is being opened over here this is not a single page because this has this close over here but if I refresh this page now see what happens it is a page of its own it is being rendered on its own page it is just intercepting that route and opening a model instead I am assuming how red it works is they actually open the modal and then change the window.url object but now inside next year they have this property of intercepting routes and I'm very excited to see what all we can do with this um I will be linking a few resources uh on what um well intercepting routes I saw a few by uh you can go through chats uh Peg on Parallel routes and interception and he also gave this example on uh the next um uh example over here so take a look at it it seems like a very promising uh new change inside uh next year's 13.3

Channel: LiveCode247

Views: 10,950

Keywords: webdevelopment, web development, nextjs, frontend

Id: RG85NeRQZCc

Length: 5min 59sec (359 seconds)

Published: Sat Apr 08 2023