Add client-side transitions to a Next.js app

Tomasz Łakomy: [0:00] There's one obvious thing that we are missing from our blog. I cannot click on the blog title and go to the actual blog post. In order to fix that, in the index page, we are going to import Link from "next/link". Link is a component provided by Next.js that can do client-side route transitions.

[0:16] As an example, we can add a link to the about page beneath the BlogTitle. To do that, I'm going to create a Link component. I'm going to set the href property to /about. Inside of it, we have to render an a tag. Inside of it, I'm going to type "About this blog." Now, beneath the blog title, we can see a link "About this blog." After I click on that, I will go to /about page.

[0:39] What about those blog posts? After all, we want to create links to dynamic pages such as post/1, /2, and so on. In order to do that, we can also use the Link component but in a slightly different way. The difference comes from the fact that our blog post page is a dynamic page as opposed to, for instance, the about page, which is entirely static with a static address.

[1:00] Let me go back to the index file and we're going to wrap the list item in a Link component. Because this thing is going to be a link to a dynamic page, I have to do href = "/post/ [id] ". The reason for it is that this has to match the structure of our pages. My blog posts are under post/[id]. We also have to provide the address that is going to be shown in the browser.

[1:22] In order to do that, we are going to render this thing as /posts/${post.id}. I forgot about the dollar. That's it. Let's see it in action. After I go back to our blog, after I click on a title, I will be directed to a blog post. If I go back and scroll down to any of those other titles is going to work just fine.

[1:41] Since we have notified deployment set up after we push those changes to GitHub, the whole app is going to be rebuilt automatically. The new version is going to be automatically deployed for us.