When Did NextJS Routing Become so Advanced??!

so turns out nexjs routing can actually be not as straightforward as it initially seems there are some Advanced patterns you don't have to use but you can use if you want to that make your app that much better A lot of people have asked me Josh talk about parallel and intercepting routes those are new those were not possible before the app router was introduced and they're pretty neat if you take one concept that's parallel routes and then the second one that's intercepting routes and put them together you get really cool use cases that significantly improve the user experience of your app let's see how they do that because it's pretty interesting and the first concept are parallel routes and what these allow you to do is take a look at this in your app router we have a layout.ts file we always have this file because it is enforced by next.js at least in the root directory and what we can do to parallel render multiple pages is The Following we we can create a folder inside of our app router and we need to call this something with at that is the convention we use so we can allow parallel routes to happen essentially rendering completely separate code to completely independent pages in the same layout for example if we wanted to call this add modal we could it's just important it is something with ADD and what happens now is very interesting simply because we have created this add modal folder right here this is automatically going to be passed into or that is a pretty fat Arrow into our layout dot yes and we can receive it as props in the layout so you know how we normally receive the children in the layout right this is the whole document and we display it in the layout well now we also receive kind of like the children the model whatever we call this right here in the layout which means that we can render both we can render the children alongside the model at the same time even though they are completely independent Pages take a look at this file for example this is For an upcoming long form video so I might need to censor some information to not spoil anything but you can see right here on the left hand side we have an add auth model and then add create Community model we receive these models right here alongside the children and in fact they are the same type as the children because after all they're nothing else than a regular page with its content so we can receive the auth model in the layout that is at the same level at the folder we have created with the ad and can then display that model right here alongside with the irregular children as we would normally now this by itself doesn't seem super useful right yeah we can render parallel routes but why would we and this pretty simple concept becomes very powerful when we combine it with a whole different topic that is also an advanced routing structure in the new app directory and that is inter oops intercepting which means we can enter accept requests before they are forwarded to handle custom logic inside of them let's say for example on our page we had a login button mostly in the nav bar but we want two separate behaviors for this login button when we click this and we are on any page we want a model to show up instead of actually taking us to the login page we want to stay on the same page that is the very important thing to take away here we are not changing the actual page when clicking this login button but instead the page says the same but a model pops up asking us to enter login data we can close this model like with an X in the top if we press this we had nothing changed right we're still on the exact same page but the important thing is the URL in here has actually changed so we are on localhost 3000 slash login so the URL pretends we're on the actual login page even though we're not this is simply shown as a model and we're still on the home page or wherever we were before this happens if we click a link component if we do a soft navigation if we are on the modal page and hard reloads that means clicking this icon here in the top browser or hitting Ctrl R what happens in that case is we actually get navigated to the main login page so this is not just a modal let's say actual page right here and put it at the bottom to make it very clear that this is simply showing up as a model we can close and this navigates us to the actual page if we do a hard reload while the URL is the same the URL did not change and the content of each page can be defined separately so for example you wouldn't want an X to close a model but instead what you might want is a button that takes you back to the home page because this is an actual page now instead of the model check it out in practice we can open the login as a model when we're anywhere on the home page but if I reload the page then notice this is the model if I reload this then this will open up as the regular page instead of the X to close the model there is a back button that will take us back to the home page interesting and we can also do this on multiple routes that are being intercepted the URL changes as well but the actual underlying page that we're on does not change it's still the home page even though I am changing the URL and only if we reload then will the actual page show up as the complete page instead of just the model and achieving this is pretty straightforward let's take a final look at the routing structure so for example in the model we wanted to intercept and let's remove the fat arrow for a second here we wanted to intercept a certain route for example one that is handled at slash sign up right that's the case from the app I just showed you we want to intercept the sign up routes so this sign up will also have its own page.tsx of course because that's what next.js demands however currently nothing is being intercepted yet what we need to do to achieve that is in this add modal component Define which routes we would like to intercept and we can do that by creating a folder in here with the name of whatever we want to intercept for example let's put this in parentheses and navigate to the same directory that means this root level directory or the add model is at and release signup set and this works kind of like the file system we can also enter dot dot navigate back directory which an orcas would be the main app directory which is not where we want to go to but instead we want to stay at the directory where the add model is at and then we can simply Define the page that we want to intercept we can say DOT sign up so these two blue files are responsible for the intercepting and the interesting part is we can define a custom Behavior whether we are intercepting or whether there's a hard refresh so let's separate this out just a little bit to make it a bit easier to see for example if we are hard refreshing the page then this page.tsx is where we will go to because we're doing a hard refresh if we are anywhere on the Page by clicking a link button that would take us to the slash sign up page then this add model in turn with the dot signup that we are intercepting would recognize okay this routing behavior is about to happen therefore instead of rendering the actual page.tsx only render the intercepted page TSX which is our model hey I really hope you liked the video if you did and light parallel and intercepting routes chances are you're gonna really enjoy my full walkthrough of the nexjs 13 app router it involves everything from SEO to routing everything you need to build modern applications that's it for me I really hope you enjoyed the video and I'll see you in the next one have a good one and bye bye

Channel: Josh tried coding

Views: 22,702

Keywords: nextjs, react, typescript, parallel routes, intercepting routes, intercept routes, tutorial, josh tried coding, joshtriedcoding, nextjs 13, nextjs app router, nextjs 13 app router

Id: pTsmh36ZB8c

Length: 8min 2sec (482 seconds)

Published: Tue May 30 2023