Introduction to Next.js Dynamic Route Parameters in Next.js
This course has been updated! We now recommend you take the Introduction to Next.js 13+, v3 course.
Transcript from the "Dynamic Route Parameters in Next.js" Lesson
[00:00:00]
>> Let's head back here. Super awesome, the routing there. If anyone knows a better routing setup in React, let me know. Because, that was pretty easy. Gatsby does something very similar as well. They use the file system. They have a plugin that reads the file system, that plugin is built into Gatsby by default.
[00:00:22] And their syntax is just a little different. I think they use underscores for parameters and not the array brackets, but you get pretty much the same results. So I'm a big fan of Gatsby's routing as well. Cool, we talked about the index stuff there. Let's talk about how do we access the dynamic, the parameters of that route, right?
[00:00:45] So for instance, we have this id here inside this route. This isn't really useful for us, unless we're, I mean why would we make this if we're not going to use the id, right? Like we need this id to do something. So this is, how we interact with that is going to depend on how we render the page.
[00:01:06] But for right now until we get to different rendering modes, we're only really just talking about client side rendering. So everything here is just regular React for now. I'll let you know when we're not doing regular React stuff, but for now, everything's just regular React. So in that case, we can actually use the router lib from Next.js, which I believe is called next/router like that.
[00:01:26] So we can import this. The eslint can't stand double quotes. And I think the one that we want is gonna be called what is it, useRouter? There we go. So useRouter. If you've never used React hooks before, this is a React hook. Most React hooks start with the use word.
[00:01:44] We're not gonna get into React hooks. There's a really good course at Frontend Masters that I wanna say, I think the V5 course actually covers hooks. So, you should check that one out from Brian Holt, that one covers hooks into more detail. I could talk a little bit about if it's confusing to someone, but I'm actually just going to keep moving.
[00:02:03] But basically, we can use this useRouter hook, which is going to give us the actual router. And then we can inspect that router and get the parameters or parameter in this case associated with this page. So what I can do is I can say, gimme the router, which is gonna be useRouter like that.
[00:02:21] And it's also note that if you aren't using functional components, if you don't know the difference between this in React and something like a class component. The difference is, this component is, you can think of it as the whole function is a render function. This is the render function.
[00:02:38] Where as class component, you manually have to create a render function and everything else is not the render function, right? In the functional component, this whole thing is the render function. And that's why hooks are here. Hooks allows us to opt into what we would traditionally have methods, whereas a class component is the other way, you opt into the render function by writing render.
[00:02:57] So just remember that, so that's kind of where hooks are. But the reason I'm saying that is because if you use class components, there's a withRouter higher order component that will wrap your class component that gives you access to the same router object. So they're both the same.
[00:03:11] This is for class components. This is for functional components. So, we're gonna use the functional component, and we're gonna get the router. And then what we wanna do is we wanna grab the id, so we can say id like this is actually gonna be an object, so I'm gonna do structure.
[00:03:25] And that's gonna be from router.query. So router.query is gonna be an object with any associated params on there, and I want the id param. And the reason I know it's id is because that's what I put in the file name. It's whatever I put in the file name.
[00:03:42] If I put, blah, blah, blah, that's what this will be. It'll be blah, blah, blah, right? So I put id, so I'm gonna get back an id here. So what I'm gonna do is I'm gonna return a component like this. And I'm gonna say, notes (Id) like that, right.
[00:04:02] So now, we should be able to see this id inside of our JSX. So let's save that, let's go back to our app. And you can see that is the id that I put here in the URL, right? If I put one, then I'll get one, right. So, pretty useful, pretty easy to get those query params.