Create dynamic routes with next.js
While building an app we may not know what kind of routes we're going to have. As an example, we don't know the title of every blogpost we're going to write (assuming that we're going to write more than one).
In this quick lesson we're going to learn how to create dynamic routers with Next.js so we can render a page for every blogpost we may end up writing in the future.
Tomasz Łakomy: [0:00] Using the predefined pages, such as this About page, may not be enough. If we want to build a blog, we do not know what kind of blog posts are we going to write in the future, and we are not going to create a component for every single possible blog post.
[0:14] Luckily, Next.js supports dynamic pages. To create a dynamic page, I'm going to create a new folder under the page directory. I'm going to call it posts, and I'm going to create a new File, which I'm going to call [title] in square brackets, that is important, .tsx. This title is going to be the dynamic part of this route and I'm going to paste in some JSX.
[0:36] This is going to create a function Post(), which is going to return an Article. Article is the component that we have created in the last lesson, and is going to render a Post title and some paragraph. Let me save that and go to our app.
[0:51] Now, if we go to posts/first-post, we're going to see the content that we have just created. Same is going to happen if you go to another post, and honestly, if you type in whatever, this is also going to work, but as we can see for now, the content is not dynamic. We would like to render different kind of content, depending on the route.
[1:10] Let's go back to our code. For now, we would like to render this dynamic part as in this [title] inside of this header. To do that, import { useRouter } from "next/router." Next up, I'm going to create an instance of the router, so I'm going to do const router = useRouter(). Let's see what's inside. I'm going to console.log(router.query).
[1:35] If I save that, go back to our app, and then refresh it, we can see that we get an object with a title of "whatever." If I change it to "something-else," I'm going to see the title, which is "something-else." Now I can go ahead and get the title from router.query and render this title over here, so Post title: {title}.
[1:57] If I save that and refresh, we can see Post title: something-else. Test it. Test. There we go. Now, we have dynamic content based on the route. One more thing is that the route.query is also going to contain the query params. If I were to add a isPremium=true, this isPremium value is also being logged out.