Intercepting Modal Tutorial Next.js 14

so with nectra s 14.1 it seems like they finally managed to fix parallel routes and intercepting routes now when I was using this before it was very buggy it was not even worth using to be honest but after playing around with it for a while now I think it's finally in an acceptable state to use so I'm going to be showing you how to use parallel and intercepting routes to implement a intercepting model which is an extremely powerful feature um that I actually used in my real job so here I have a basic app to demo intercepting models so as you can see when I click here there's a loading State and after done fetching it's going to display a model and the cool thing about this model is that when you copy the URL and you go to it from an external Source it should still work but it will bring you into its own dedicated non-modal page so that's what it means to be an intercepting model it will intercept this page and show you a model but if you go to it from an external Source then it will show you its own dedicated page and this is very nice we actually use this at our workplace so we have pictures right and when you click on it it will show you the picture inside a model but if you share the URL and someone click on it then they will be taken to its own dedicated page that is non-modal and also the main benefit of using an intercepting mode is that you can fetch from the server so this is fetching from the server and if you don't use an intercepting model so just using the traditional model you would have to use something like react query to do the fetching on the client side and that's just not as fast or as convenient and I'm also going to be showing you how to implement a catchall page so when you click here it should take you to another page and also close the model so previously this didn't work but I managed to get it working now so I guess they did manage to fix a lot of the by the way the docks that they provide are very bad I had a very hard time trying to make this work it was even harder a couple months ago and I do not recommend that you follow their example here that they provided this example is terrible I look through it I don't know why they decided to do it this way but if you look at it you'll probably not even understand what they're doing they're using Create paror here I don't know why that's necessary once again I don't recommend that you use their example as a reference just use this repel in the description as an example instead all right let's get into it so the first thing you need to do is have a page P that you want to intercept with your intercepting model so here I have a photo slid page and this is the page that we're going to be intercepting with our model up here so that's the second step create another folder called at modal it doesn't have to be at modal it can be at photos- modal for example but you would use this syntax and inside that we need to have this bracket dot photos and the bracket dot is static but the photos needs to match whatever you're intercepting so here we're intercepting photos slid so up here it's going to be the same so this is our Modo page so here I'm just waiting for 2 seconds but this is where you would fetch your data so you would fetch your data here and then pass that into your modal as prop all right now let's look at the modal component and here we actually need to use the dialogue element this is the easiest way to do it because when you use the dialogue element it comes with some built-in styling so you don't have to do all the styling yourself and when you click the Escape key it will automatically close the modal and here we need to use use effect to call the show modal method that comes with the dialogue element we also have a close modal function and this function basically just checks if the target is equal to the dialogue element if it is equal to the dialog element we call router. back which will close the model and the reason why we want to do it this way is that when you click on the outside of the model it will close see which is nice and of course when you click Escape it will also close and by the way if you want to style your model with Tailwind all you have to do is use the backdrop pseudo class I'm just making the background a little darker and adding a backdrop blur I recommend that you just copy this component I will leave the repo Link in the description and you can customize it however you want and if you want to close your model by navigating to a different page then you would need to implement a catchall route so here I basically just have a link to the catch all page and here is the catch all page you need to use this exact same dot dot dot catch all and here you just have a catch all page that returns null don't ask me why it's just this is what you need to make it work so after we're done with all that go to your layout file that is on the same level as your at modal folder so here the my layout file is actually the root layout but it doesn't have to be the root layout just whatever layout is on the same level as your at modal folder so here we need to destructure the modal and then use that modal in the body here like this and whatever you call your at folder is the same name that you need to put here so here I'm just calling it at modal but if I call it at photos- mod then here it needs to be the same name all right now the final step you need to add two default files so here I have a file called default. TSX you need just use this exact sytax return null you need to place the first file on the same level as your at modo folder and then inside that at mod folder just add another one with the exact same syntax how you have to do is you just have to for it to work and this is optional but if you want to show a loading State then you would also need a loading. TSX file so this is what the loading state looks like when you click it's showing a loading skeleton so if you want this effect then this is what you would have to do here I'm using a div and this will act as our backdrop and the skeleton is our modal content all this styling does is Center the modal and by the way I did try to use a dialogue element instead and have the skeleton inside of that for some reason it just doesn't work so this skeleton is from Shaden UI I don't know why it doesn't work with the dialogue element but it doesn't so I'm just going to leave it in there and if you like this tutorial consider liking and subscribing that will encourage me to make more content

Channel: Apestein

Views: 1,241

Keywords:

Id: lHN910AA3RU

Length: 5min 1sec (301 seconds)

Published: Fri Jan 26 2024