Next.js Modal Routing

today we're going to take a look at modal routing in next.js and to get us started we have this app right here that shows an image gallery and when i click on one of these images i'm brought to a page that just shows that image and what we want to do is to make it so that image shows up as a modal on this page with the rest of the gallery still rendered in the background and so if we look at this image page here that's this route right here you can see that we have this image detail component so we're going to go back to the home page and we'll just paste in that image detail let's get it imported and then we're just going to hard code an image so we're going to render image four and so now when we're back on the home page you can see before our grid we have the fourth image rendered that's this one down here and now the whole point of this was to get this rendered in a modal so we can go ahead and wrap this in our modal component and this modal is just a local import that we already have in our application so now we can see the image is is actually rendering in a modal over our gallery but we want to make it show the image that the user clicked on instead of hard coding this for so how might we do that well one way is to use the url and we can have the home page with a query param to image id4 so we're still on the home page here so we have our grid of images loaded but we also have this image query param in the url that's going to let us render image 4 in a modal so let's update our links to all link to this style of url okay so now when i click the first image you can see that the url is changing but i'm still on the home page and now we can go back and show our modal again and instead of rendering this four we're going to use the query param so we get that from using the router and we can just do router.query.image check it out image1 is rendered in the modal and when i go to image 2 well i get image 2 in the modal pretty cool so let's go back to our home page and see what that looks like so we have a small bug here the modal is trying to render with an image but since we have no image query param nothing shows so we're just going to wrap this in a guard to say only render the modal if we have an image query program so now let's give this a shot i can show the home page and then i can click the first image and we can click a few more images home page is rendering and we can see the url updating uh but it never feels like we're leaving this page and you know what that's because we're not we're always on the homepage we're just changing the query param so instead of using the back button to get back to the home page it would be nice if we had a way to dismiss this modal and our modal actually has an on close prop and we can pass in a function to call when the user clicks the overlay and so what we want to do here is we just want to push the user back to the home page okay let's give this a shot i'm going to start off on the home page and when i click the overlay you can see that the modal dismisses so this is great we've got our modal routing but we lost something that we originally had in this app and that is the ability to go to a page that only shows the image and not the gallery and in other words we've lost these permalink urls so if i go back to the home page and i grab this link and i were to share it the person i'm sharing it to now has to load everything in the background they have to load all the images the whole gallery i really just want to share image 2 here so it would be great if i could keep this permalink url and it turns out that next has a great answer to this and that is with the links as prop so let me show you how this works we're going to say link as slash one let's go back to the home page and then here you'll notice when i click this link i'm on the index page and i have the modal rendered but the url updated to that permalink url the slash one url and now if i copy this and i share it look at that we're back on the detail page so we don't have to render the whole index page when we're sharing the link so this is what nexus as property does when we click this link we're going to update the url to be slash one however we're going to render the page that's in the href so we're going to render the index page with that image query param so this gives us a super simple way to render two different pages based on whether we're doing in-app navigation or we have the first initial load of the app so let's close the second tab and let's go ahead and update the rest of these links okay let's see how this works so image one url is right image 2 the url is right and this is all working great i can get the images loaded on the index page but i also get these permalink urls that render just the image i can even command click these and look at that i've got the detail page up in a new tab so this is it we have our modal routing working in our next app and i really like this approach of having the detail page be able to render on its own but you update the url when you're doing the in-app navigation you know there's a lot of apps that work like this if you go on twitter or instagram and you're on your feed and you click something they'll do this kind of approach where they'll open it in an overlay above your feed but if you reload the page or send someone a link you end up just loading that image or just loading that tweet so i love how next allows us to build uis like this and how easy they make it and a big takeaway for me was learning about this as prop and learning about how the asprop is going to let us update the url but give us a space to render a different page or render a different component so i found that really really cool and it was kind of a light bulb moment for me with next and routing and the way that links work now one last thing i want to show you is this modal this is just an in-app modal that i've built using headless ui there's really nothing special about this modal you can use any modal from any different react library to achieve this routing but i will push this code to github and i'll have a link to this repo so if you want to play with this modal and see how i built it it'll be available so that's it if you have any questions let me know in the comments

Channel: Ryan Toronto

Views: 27,034

Keywords:

Id: P4W_LaotmNI

Length: 7min 34sec (454 seconds)

Published: Fri Jan 21 2022