Create a Next.js app from scratch with create-next-app

Enable TypeScript support in a Next.js app

Add global styles to a Next.js app

Add CSS-in-JS styles with emotion to a Next.js app

Add static routes to a Next.js app

Create dynamic routes with next.js

Adding absolute imports to Next.js app

Use Static Generation with getStaticProps in Next.js with TypeScript

Use static generation for dynamic blog pages with Next.js

Set up Netlify deployments for a Next.js blog

Add client-side transitions to a Next.js app

Serve static files with Next.js

Use Head tag in Next.js to add metatags to a site

Add a Netlify Form to a site to gather user's feedback

Change a site name in Netlify

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

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.

Add client-side transitions to a Next.js app

Share this video with your friends

Course

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify