New Routing in NextJS 13 - Complete Overview And In-Depth Look!

hello in next.js there's a new routing system and it's pretty cool so in this video we're going to take a look at some Concepts and some file types that are new and how they really help not only the developer experience but also you know how they save you time in the development process and I think it's definitely learning these new Concepts because eventually they will become stable right now they're in beta but they will eventually become stable and then learning them will pay off big time I think so let's get right into which file types and concepts are new and how they will help you in your development Journey here we are in a nexjs 13 application amp if you're wondering how to do this for yourself you can run npx create next app at latest and then have the flag experimental Dash app and if you run that that's going to create yourself a completely new Nexus 13 app including the new app directory and everything that's you know involved in nextges 30 in this is not a completely new project I've already done a Tailwind implementation but that's it so it's almost completely new and I've changed nothing really about the structure just a bit of Tailwind integration so when you start out you have a page and a layout and you can't actually delete this layout and understanding these two pages is crucial in understanding how to route in Nexus 13. so the page.tsx is not called index.tsx anymore as it was in the old Pages directory also with the old Pages directory they have an incremental adoption approach so if I were to create a file called like some page.tsx here and then I could still go to the browser to some page.tsx and that will still work so having pages in here doesn't really do anything it's just essentially like the old next.js Pages directory now what you can't do is have the same file name in the app and in the pages because then Nexus wouldn't know which page to route to but okay let's say look at the app so it's not called index anymore it's called page.tsx but it is essentially from the content the same thing as an index.tsx in the old Nexus and we have a layout.tsx that you can't remove so what exactly is the layout in this layout we have a argument children and we pass that children to the body they have some structure around with the HTML and the head and I've already created a layout component so this is the same thing we had before same thing as this just the structure is a bit better and typesafe like this is the typescript approach we would do and anytime you create a layout component that means that all pages at the same level or the levels lower like in subfolders will get rooted through this layout so let's take a look at how that looks in practice let's give the layout a background rate of 500 and the page will say index page and we will save that startup okay the service already started and we go to localhost 3000 and take a look at how this looks in the browser so we can see the index page what we have in the um and by the way if you're wondering I have a little project open here on the side where I've done all this stuff already so if I peek over there you know that it's just to explain this a bit better and so as we can see in the browser right here we have the index page and then the red background so nowhere here is the red red background mentioned but the page gets routed through the layout because it's at the same level or below in this case at the same level and so it will get past the layout and the layout will then be rendered on the page now besides the layout there's another thing we can have and that is the template.tsx so let's create a functional component for that and that template also receives the same thing as the layout so there is a react node type and why would you want to use the template instead of the layout because you can also use both at the same time so we can say class name of text like green 500 and then take a look at what happens in the browser so let's read out the page and now okay it just says template because we are not rendering the children anywhere we can render those out reload the page and now we can see the page we have right here first gets passed to the template and then that template gets passed to the layout and that's really interesting because you could use both simultaneously next shares themselves recommend using the layout instead of the template if you don't have a reason to use the template but the reasons for the template could involve you once um uh let me Google what the sun UNIF uniform like a consistent you want consistent animations so in the template you would Define one animation with some animation library and then every page that is below or at the same level of this template will have the same animation which is pretty cool and now the last thing you can have is the head but I'm gonna get to that example later first let's take a look at how the routing works and in nex.js13 the way you create roads is not with files anymore so you don't create a new file and then pagexyz.tsx and then if you go into the browser to page xyz.tsx that page is going to appear no that's not how it works anymore and the new Nexus you create folders that's the difference so if I create a folder let's call that folder users and that's gonna allow us to have a really good example in this users folder we're gonna have one user that is going to be called John so let's have user John and okay so I said we create folders for page so then according to what I said we should be able to go to slash user slash Jon because that is a those folders exist in our project and then it should show them something right well no it doesn't because the way next.js 13 works is we need to have files and that file is always going to be called page.tsx so what we're not doing anymore is creating a file called john.tsx instead of users but we are creating a folder called whatever the page should be up here in the URL so in our case John and then inside that folder name is just going to be a page.tsx and that name is now um you know assumed by next year so we can't call this whatever we want this needs to be called page.tsx and now when we save that we can say John in here and now if we navigate to users John refresh the page it's gonna say John so that's how we got this route to work let's now make a second user and the way we do that is the same we go to new folder let's call it Bob and inside Bob because this is just an empty folder we need a page.tsx and inside that page.tsx there we can actually have our actual page and that's gonna say um for example Bob and let's read out the page go to slash user slash Bob and as you can see now the new Bob route also works and now is where the layout component really shines so for every page that we have in the users we want some kind of similar layout and the way we do that is we go to wherever the files are so users and then create a file called layout.tsx it's going to be layout components so pretty much just a functional component that receives children that are of type react node but but you really only need to worry about this at all if you're using typescript if you're using JavaScript this doesn't matter you can just receive the children and now let's say for every user we want a background of a red of 200. and just though so this doesn't conflict I'm gonna remove any styles from the original layout and template so remove the background red now we have no Styles except for the layout that is for the users save all of this refresh the page and now this is not working yet why is this not working okay I just was really confused as to why this layout wasn't working and this layout is working the reason it isn't right now is because I kind of messed up the Tailwind integration so if you want to have Tailwind in the new Nexus 13 then you don't want to import it at page.tsx but inside the layout because now the layout will wrap everything because it is at the root of the project as I said Pages at the same level or below so in subfolders will be involved in that layout so if we read out the page okay that was the reason so pay attention to that import the globals.css or any CSS you want in the layouts and not the pages okay so as we can see right now um both Bob and John have the same layout so we can go to Bob we can go to John and because they are both um below or at the same level of this layer also in the users folder we have Bob John and then the layout um because we have that structure they will both have the same layout now what if we wanted to create a third user but exclude that user from this layout for example one user by the name of Jim Bob but we still wanted that user to be available at slash user slash Jim Bob how do we do that in Nexus 13 and the approach would be the following we are going to use something called a route group and what does that mean so in Nexia is 13 you can create a folder and call it something that is wrapped in like these round I think it's called parentheses like whatever you use in in JavaScript functions like these yellow things right here that's what I mean the I think it's called parentheses and after creating that folder we can put it inside of our users for example and then we can put all our files inside of there so essentially what we did is we have the same structure but everything moved to another folder called in parentheses names no um so according to Nexus 12 logic we would go to users names and then Bob right but what routing groups do is everything that is mentioned in parentheses in your routes will not be part of the URL so we wouldn't type in um like names slash Bob right here that wouldn't do anything that page doesn't exist because everything that's wrapped in parentheses you don't type that is just for your structure as a developer this will not be part of the actual URL so you can name this whatever you want it's not it is simply for your structuring um so we can still go to users Bob it's going to be the exact same thing we can still go to user John and everything that's in this folder will now have the layout but now we can create a new folder called um Jim Bob inside of there we're going to have is always a page.tsx have a functional component and it's going to be called Jim Bob and the structure we have now is we have the users folder that involves everything then we have names in these parentheses and we have Jim Bob as at the same level as the names and that is how we're excluding it from the layout so the layout right now only applies to John and Bob because Jim Bob is one level above the layout and therefore it doesn't apply so if we go to the browser and then user slash Jim Bob we see that Jim Bob is excluded from the layout and that's how we do it and as I said these do not get propagated into the URL so we can still go to users and then Bob and John like before I think if you understood what I just said you grabbed one of the most important concepts of Nexus 13 and now let's jump a bit more into the more advanced stuff so one thing you can also do is have Dynamic routes as you know from Nexus 12 and you can say like name dot TSX inside this name.tsx we're going to have a page.tsx have a functional component and we're gonna just say other name because if the name is not Bob or John then this name.tsx will get rendered so if we go to users slash David then okay this page could not be found and why can this name not be found because oh okay and I was like bug fixing for like two minutes right here because I couldn't figure out why this wasn't working and you don't want to include the file ending of course in the folder naming that is not what you want to do so it's just in in bracket's name and name.tsx and now if we navigate to something like users David then the page that we have right here is going to get rendered however if we go to users David one then this page couldn't be found now I'm going to get into why in a second first let's see how we would get the amp Rams on this page so the way that we get the params in hs13 is right here through the params and these just automatically get paid uh gets sent to this page.tsx that is wrapped in a dynamic you know brackets and we can receive the programs in this this case that's going to be an object that has the name as a string but you can make sure what type it is for you just by logging out the params and then we're gonna say other name and that is going to be params.name and now whatever name we're gonna pass as the URL right here so in this case David should show up right here so other name David and if we go to carry or whatever then that will also be mentioned right here because we're receiving those as the params so that's I think a great improvement over next year is 12. now you can also get access to the search params so search params and then search params would be let's just say any it doesn't really matter and let's log out the search params in here um so because this is a server component we would get them right here and not in the user console so let's say question mark ID is one two three send that to the server and now we can see the search params logged out of the server console which is id123 now if the concept of server and client components is client components is new to you this is also a concept introduced in Nexus 13. if we say use client up here then it's not going to be in the server console anymore but it's going to be in the client console but that's the concept for a different video and apparently it doesn't work okay it's still getting logged out in the server console I'm not quite sure why but it doesn't really matter anyway so that's the concept for a different video but we can see the search params actually arrive in this component and we can work with them however we want here now in this case we don't need them okay and now one Advanced concept is we can as I mentioned earlier also have a case where we have David and then we want david1 right and in this case this page could not be found now what you can also do instead of the dynamic brackets we can have a catch all and we do that by inserting three dots before so bracket Dot and then name closing bracket and by doing that that would also match everything so A B C slash one two three slash abc123 that would match everything and pass it as the params in an array to this component so when we log out the params you can see if we reload the page what gets passed we have an array and that array contains so David is the first then slash one so the a whole string is pretty much split at the slashes so we have David one ABC one two three and then ABC one to three because those were the parameters that we gave the browser and now comes some really interesting stuff so besides having a catch-all we can get even more crazy and we can have something that is catching even more so we can have a double bracket and this might give us an error now from the console so let's read out the page okay we won't get an error but we might get one now no we don't okay so this works just fine so essentially what this notation right here does is it doesn't match anything um like it doesn't only match anything that is you know slash and then whatever we type so slash David So slash user slash David we have here and then this would be slash users this is skipped because it's in like parentheses slash David it doesn't exist anywhere here and so we can also catch that by having the double brackets if we didn't have the double brackets um remove them for now save that then this page would be um something different this would be um not found so the users is a page we don't have but by calling this as a double bracket this will also catch whatever comes before it and so in this case the users so it would be the index page pretty much for the users so reload the page and now the index page for the users is this double bracket notation because it also goes fourth one step now the reason I was curious as to why this might give an error is because if we had a page.tsx for the users then next year is probably wouldn't know which page to render so if we go to users that would match this name right here but it would also match this page.tsx so next.js would be like Yo which page should I render now and we can see that in the console right here you cannot Define a route with the same specificity or optional catch as an optional catch or route so the name is double brackets in the page.tsx are pretty much the same page and so next year is prioritizes this page right here but it gives it a warning you shouldn't be doing this and now one final step I want to show you to really handle the point home of how to work with a new layouting and stuff is one more file name that I haven't introduced so there's layout this template there's page and there's one more so we can change this back to the normal catch all and let's say for every name that we have we want to have the name as the tab title how would we go about that because the next 13 provides a different way for that instead of using the next head like here you can also say um just head dot TSX that head component can return um only four specific things so a head component can return the title meta link and a script so we return those in these um how do they call again these fragments and inside of these fragments we can have a title and that might be um well we can try just a name for now so every tab is going to have the title of name we can save that read all the page okay that doesn't work yet so the reason this didn't work is because we specified it in the name but we were at user Bob so just by the logic is we go into Bob and there is no head so this wouldn't work but because we specified it in the name so that means every time this name is not Bob John or Jim Bob then this head would get rendered and which makes sense right on on these pages that you statically define you already know the name but on this one you don't know because what the user types in here can be carry or it can be any name and you wonder that out you want to render that out as the tab title so right now we just have the word name literally being returned as the tab name so how do we get the carry well it's the same approach as getting the search params right here so in the head we also get a per ramps and let's just not worry about whatever those are and let's just render out or actually we can worry about them let's log them out to the console params and then have the prems right here so every time we enter a name it is not Bob Jim or Jim Bob or whatever we get the uh params so params is an object that has a name property that is an array um and that is a string array so we can say const name is equal to params.name and we can just destructure the first thing from that array and then have that as the page title and now this won't work for something like a bob for example because that's not where the head applies in our structure but if we were to enter David again then as you can see the tab title has become David because we only match this head every time this catch all gets matched which won't get matched if we enter Bob or Jon because these are prioritized already catch all and this is just for everything else that comes after that and then we put that as the title in a head.tsx which is also new in Nexus 13. and with that said we covered the most important part of the nexjs routing in 13 and I really hope you enjoyed this video if you would like further reading on this topic then I'm gonna link some posts in the description like the original nexjs routing on defining routes which is also very helpful and how I prepared my example project over here that I used for uh you know just getting with you into the structure of routing and Nexus 13. I hope you enjoyed the video thank you for watching see in the next one and bye bye

Channel: Josh tried coding

Views: 19,984

Keywords: nextjs, v13, nextjs 13, routing, nextjs 13 routung, nextjs 13 app, nextjs 13 app directory, tutorial, joshtriedcoding, josh tried coding

Id: k2IQ-CcE7pk

Length: 23min 14sec (1394 seconds)

Published: Wed Nov 02 2022