Create Dynamic Routes with Next.js
Next.js dynamic routes are both powerful and ergonomic. Simply wrap the filename for your dynamic route in square brackets [] and Next.js will interpret that route as dynamic.
Once you have a dynamic route you can use Next.js’ useRouter hook to access URL parameters and use them in your component.
Lazar Nikolov: [0:00] In the previous lesson, we learned how to create and navigate between pages, and how Next.js generates the routes for us.
[0:07] What if we wanted to create a page where the last part changes, for example, a blog post page? That feature in Next.js is called dynamic routes. Creating dynamic routes is similar to creating ordinary pages, but their name is wrapped with brackets.
[0:22] Let's open the exercise number 3, and check out the index file. We can see that we already have some data inside. There is a heading labeled my favorite music genres, and a list of music genres rock, country, and pop. Each list item point to a page that we need to create.
[0:38] Let's right-click on Pages, click on new file, and write genre.tsx, but wrap the genre with brackets. That's how we create dynamic pages. Let's create a React component and export it.
[0:54] In order to get dynamic parts from the route, we can use the useRouter hook that's exported from the next/router package.
[1:00] First, let's import it. Now, we can get inside of the component and get the router. Const router = useRouter(). To obtain the dynamic part, we can extract it from the router.query. The name will be genre, just like how our page is named within the brackets.
[1:24] We're going to return a heading and then place the genre inside. Let's see what we get. Let's run npm run dev and visit localhost:3000. Here is the initial home page where we can see the three, rock, country, and pop genres.
[1:42] If we click on them, we can see their names in the headings. Let's go back visit country, and let's go back visit pop. We can go even further. Let's say we wanted to create a page that displays a certain comment under a certain post.
[2:02] We can create a new folder called post. Inside, we can create a new folder called PID or post ID with brackets, so it's dynamic. Inside, we can create a new file called comment.tsx with brackets, so it's dynamic.
[2:18] Let's create the React component. Import the useRouter hook from next/router. Let's obtain the router using the useRouter hook. We're going to console.log the router.query. To avoid errors, we are going to return a simple hello paragraph. Let's see what we get.
[2:44] If we go to /post/some post ID and then some comment ID and open the console, we can see that the router.query is an object that contains the PID and the comment values. This is how we can create dynamic routes that are even nested.
[3:03] Let's recap. The difference between the ordinary page and the dynamic page, is that the dynamic page's name is wrapped with brackets. Inside of the dynamic page, we can use the useRouter hook to obtain the router and get the dynamic part.
[3:18] We can even have nested dynamic routes if we place them into dynamic folders, and we'll still obtain the values from the router.query.