Next.js 14 Tutorial - 32 - Parallel Intercepting Routes

in the past few videos we've learned about parallel routes and intercepting routes to Advanced routing patterns introduced in the new app router in this video I want to walk you through an example that makes use of both these patterns in conjunction remember how I mentioned the photo feed example for intercepting routes well in this video I will show you this example in the browser and walk you through the code to help you understand how it all works here's the Demo First when we visit localhost 3000 SL photo Hyun feed we see an image feed with the seven New Wonders of the World when you click on an image a model pops open displaying the same image in a larger size along with some information at the bottom the name photographer and the location this is in fact a parallel route which has been intercepted the URL updates to/ photo feed followed by the image ID which is two in this case but the model route is a parallel intercepted route that is being rendered in the same layout and has the context of the photo feed in the background typically with models clicking on the browser back button would take you to the previous page and not just close the model but with parallel intercepting routes we can fix that as you can see forward and back browser buttons open and close the model if I were to share this URL and access the link or simply reload the page the photo details load on a completely new page we have the name the photographer name and the location working with a model is a very good use case for parallel intercepting routes the same concept can be applied for opening a login model when you click on a login button but a login page when you directly navigate to/ login if this example is clear let's go back to vs code and I will walk you through the steps to achieve this you can find the entire code related to this example in the photo feed folder I also have created a modal component in the components folder for step one find a list of images and place them in the photos folder within the photo feed folder I have placed seven images as you can see step two import all the images in a typescript file and create an array out of these images with some metadata for each image in this case each Wonder object has an ID name Source photographer and a location step three create a page. TSX file in the photo feed folder and render the list of images using the Wonders array and a styling solution of your choice I have used tailin CSS each image is wrapped within a link component that links to the URL SL photo feed followed by the photo ID this can be 1 2 and so on up to S this page will render the photo feed when you navigate to localhost 3000 SLO Feed step four create the photo details Dynamic route within the photo feed folder create a new ID Dynamic route in this route get hold of the params ID find the individual photo corresponding to that ID from the Wonders array and render the details about the photo this will render the individual photo details when you navigate to SL photo feed followed by an ID for example two this corresponds to Petra in Jordan now that we have a photo feed and The Details page for step five we need to intercept the navigation from the feed to The Details page since we want a model that will render on top of the current feed we need a parallel route first So within the photo feed folder create at model as a parall route and includeed in layout. TSX along with children slot so we have the model and children children corresponds to page. TSX within model create a photo feed route that intercepts the photo feed Route One segment above which also contains the ID folder within the ID folder create a page that renders the photo Det details similar to the ID route from before but this time placed inside a model the photo name is placed at the bottom instead of at the top to show that we can have different uis for the two routes one for the original route and one for the intercepting route but with this in place when you click on an image in the feed your navigation should be intercepted by the model route reloading will render the original route hopefully these two Advanced routing concepts are starting to make more sense to you now for the complete source code please visit my GitHub repository link is in the description box down below all right thank you for watching please consider subscribing to the channel and I'll see you in the next one

Channel: Codevolution

Views: 29,288

Keywords: Codevolution, React, Next.js, Next.js 14, Next.js Tutorial, Next.js 14 Tutorial, Next.js Tutorials, Next.js for Beginners, Next.js 14 Tutorials, Next.js 14 Tutorial for Beginners, App Router, Next.js React Server Components, Next.js Routing, Next.js Data Fetching, Parallel Intercepting Routes, Parallel Intercepting Routes in Next.js

Id: mVOvx9eVHg0

Length: 5min 57sec (357 seconds)

Published: Thu Dec 21 2023