⚠️ This lesson is retired and might contain outdated information.

Add client-side transitions to a Next.js app

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

Being able to link from one page to another is how the web was born so in this quick lesson we're going to learn how to use a Link component from next/link package in order to add client-side transitions to our 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.

egghead
egghead
~ 7 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today