Dynamic Routing

[00:00:00]
>> So far, we've only been talking about static routing, that basically this means we know the name of the route that we wanna go to ahead of time. So therefore, we can make a folder for it, but what if you don't know the name of the route that you wanna go to ahead of time?

[00:00:12]
What if it's like, slash this user's ID or slash this blog post title? And you just, it's dynamic, you don't know the source of that segment It can come from a database. It can come from a CMS, it can come from an API call, it's a dynamic route.

[00:00:29]
So we've already solved this, this isn't new to Next.js, every router system has the ability to use route params to be able to say, this part of the URL is dynamic. It's a parameter, that's nothing new, so how do you show that in folders? It's actually really cool, so in order to like make something dynamic, what we can do is we can just make another folder.

[00:00:50]
Because every time you make a new segment you have to make another folder. So let's say in the case of docs I want a documentation website, that's like slash docs and then everything after docs. It could be anything, I don't know what it's gonna be cuz I haven't written a docs yet.

[00:01:05]
But I know it's gonna be the same layout, it's just the content's gonna be different. So I just wanna make one component that represents every single possible documentation page that's going to be generated. But the URL I want to be different depending on what page you're on. So I can make that a parameter and the way you can do that is you can use the square brackets.

[00:01:22]
So I can say square brackets and then put whatever name of parameter that I want. So, in this case, I could put id, I could put title, whatever you want, so, let's just say we put id here. So, I have a folder called id, and then now I can go into the folder itself and now make a page.tsx.

[00:01:43]
And now I'll have a Docs page, is this one also called Docs page? Yeah, actually, I'm just gonna copy this one, just put it there, and I'll just call this like Docs like ID page or something, just to make it different. So now because I have this dynamic route parameter in here in my folder with the square brackets, I'm able to route to it with any arbitrary value, right?

[00:02:08]
So now I can go here and I can say docs, not that, the hux, and then let's see, I can go there. The original one loads up because I still have a page here, so that loads up, it's good to go. But now I can go to slash literally anything and that one loads up to let me change the name of it so you can actually see, this is the ID page.

[00:02:34]
There we go, so now you can see we're on the ID page. All right, and it doesn't matter what value I put in here after Docs because it's a parameter. I can literally put anything here and it'll still stay on this page because it's dynamic. So that makes sense?

[00:02:51]
All right, every every router has this if you've ever made anything with any back end language, if you've ever configured a front end router, it's pretty much the same thing. It's just that you have this weird thing here which you'll get used to, I think, I hope so.

[00:03:08]
So remember you could put whatever you want here and what you put here is going to determine what you access. Cuz if you're gonna put something here, I'm guessing you're gonna need to do something with that. This is why people put like IDs in URL because it's some unique identifier that they can use to then go fetch the data necessary for that page, right?

[00:03:28]
Cuz if you think about it, any page that's going to be rendering on a dynamic route is almost acting like a template, right? Cuz it's gonna be the same page for every single variation of whatever this value is. So, if I'm Facebook and I'm going to slash profile slash user's ID, we all have the same profile pages that the data owner that is different.

[00:03:52]
So how does that page know what data to fetch? Well, that's why you put something unique in the URL here so that you can grab and then go get the data specifically for that in this case user. And then that way you can render it inside of this template, so you need access to that.

[00:04:07]
So the way you can do that is if the page that you're on is underneath a dynamic segment like this, you get a prop called params. And the params is an object that's going to have properties on it that are named the same as the params you created in a folder.

[00:04:24]
So in this case, params.id should show us the id parameter that we passed into the route, so let's check that out. Oops, not here. So you can see I have anything, cuz I typed in anything, if I type in here, you can see it says here, right. So this is how the page becomes dynamic, so now I can take that unique value and go get some data with it, or talk to a CMS, or make an API call.

[00:04:56]
Whatever I got to do to make sure the thing that I'm showing on this page is supposed to be for this page that's matching this ID. That makes sense? Any questions on that?
>> Are multiple parameters allowed?
>> It's a great question, we're getting into that right now, so yeah, there's no questions on this.

[00:05:21]
So yeah, basically that let's say you wanna have multiple parameters. Let's say, actually all my documentation pages are like slash ID slash title or something weird like that. So then what I would do is I would make a new folder in ID and then I make this one dynamic and I would call this one title.

[00:05:38]
Right, and then I'm just actually just going to move this one up here. So now I have the page inside of slash ID slash title, both are dynamic. And guess what, I can still get access to both of those, I can still say params.title, and still have them here, and still be good to go.

[00:05:57]
But now, as you can see I get a 404 because there's no longer a page for a slash ID. So it's like, I don't know what that is, so I would have to go to like slash here there. And then now, I get that route that has both of those parameters in it here there.

[00:06:16]
And you can do that forever, you can just nest it. So This is cool, but like maybe, maybe I don't really care what the slugs are because that's not gonna change the design or the layout of this page. It's always gonna be the same no matter what, how many paths come after docs.

[00:06:35]
I'm always gonna use the same page, so there's a shortcut I could do cuz maybe you have a variable URL. Like maybe one URL might just be slash ID, maybe another URL might be slash ID slash title, maybe another URL slash id slash title slash something else. But it's regardless because you still wanna show just this page, you're still gonna show the same design.

[00:06:56]
The same layout, but just different content, so instead of like trying to account for those variable length URLs, you can do a shortcut. So I'll show you the shortcut, so I'm just gonna just copy this component right quick cuz I'm just gonna delete this folder. And this, what I'm making now is gonna be part of the app we're working on.

[00:07:16]
That was most everything, whoa what, okay, it dropped me in the next folder. There we go, so this is the output, I don't know why it always drops me here when I delete things, it's kind of weird. So now in the docs page, I'm going to instead of having ID like this, instead I'm going to do something like I'm gonna put three dots in front of it.

[00:07:40]
So, by putting three dots in front of the ID, let me zoom in on it so you can see, so basically what this is saying is, this is saying like, this is called a catch-all route. This means every route, no matter how many segments, after ID, show this page I'm about to make.

[00:07:57]
Okay, so it's catching every single segment every single route after ID. And then I'm also I'm just gonna delete this page TSX that I have in Docs cuz I wanna demonstrate something, so I'm just gonna delete this page as well. So let's just say get out here. Okay, and now inside of Doc slash this catch all Id, I'm gonna make a new page.

[00:08:25]
Like that, I'm just gonna paste this in here, And no matter where I go as far as URL, it should allow me to navigate with one caveat, and we'll talk about that. And then so you can see I went to docs here there, I can go another, some more.

[00:08:45]
It doesn't matter, I can keep going and it will always show this page, right and this is a great use case for actually something like a documentation page. I actually think this is what Nextjs does for their documentation page. If you just look at the segments in the URL, they're like, variable and length.

[00:09:01]
Some are two segments, some are four segments, some are five segments, but the page is exactly the same. Nothing ever changes except for the content that's in this middle lane here, so more than likely I would imagine they would have just set up. A catchall route like this for their documentation versus make one folder that has one segment.

[00:09:22]
Make another folder that has two segments, make another folder and then they're all the same exact component. Why would you do that? So you would probably just do it this way. The one caveat though is that like now what if I just wanna go to docs? I can't just go to docs anymore, right?

[00:09:41]
But I can go to anything here, so to also make it inclusive to go to the segment that you're currently on before the dynamic segment. You can change this bracket dot dot to be double bracket, like that. So if you put two brackets around it, now it's inclusive and it will include docs, so it'll show this page if someone just goes to docs as well.

[00:10:05]
So now I can just go to docs or should be able just to go to docs and that loads up as well. So again, a really good use case for this is I have variable length segments that I don't wanna have to write a folder for every single time.

[00:10:22]
Because one maybe I don't know how many the variation between those lens or two is just a lot of work. And then also even if I did do that, they're all literally the exact same page with the exact same styling. The only thing different between them is the content that's rendered, so save yourself some time you can just make one component that represents every possible segment.

[00:10:41]
In this group, without having to account for all of them, wanting to demonstrate what the parameters look like when you are inside of a catch all route. So if you go to the, in my case the page inside of the dynamic segment that I have here with ID and you were to just look at the params.

[00:11:03]
If you were to log this, because they're not named, right? They're variable length, you only have one name and that's ID, but you might have variable length. So how do you represent that, how do you see that? So let's just see what happens when I just do docs with no parameter, you can see that it's just an empty object.

[00:11:23]
Then if I add just one for like, what represents the ID so like, here is the ID, you can see that I have something called ID and it's an array. And that's the, here's the ID, that's the first parameter but then the more that I add, What ends up happening is that it just gets put into that ID array, right?

[00:11:47]
So that's a little different than before where we had two different segments where we had like ID and then we had title. Those were two different keys in the parameters object. When we do a catchall, it's always gonna be in that that key for whatever you called it.

[00:12:01]
In this case id, and it'll just be an array in the order in which the segment came, right? So it was this slash this slash this slash this slash this, so that's how you would get that information. Yeah, cool, other thing I forgot to mention is when it comes to your Node version.

[00:12:20]
Make sure you're at least on Node version 18 in order to run some of these features, seems like 20 also works, which is the latest version. 18 is a current LTS or lifetime support version, so at least on 18 to get some of these things to work. If you're on any version before that, cannot guarantee that any of this stuff will work, if I got think you have to use 18 according to the next docs.

[00:12:43]
If you don't know how to switch versions with Node, I highly recommend checking out the intro to Node.js course that we have here, where I do talk about that. But TLDR, you can use something called NVM, which stands for Node Version Manager, which allows you to switch versions of your Node back and forth pretty easily.

[00:12:59]
You can use that to download and install and switch to any version of Node that you want.