Introducing Nextjs Links

Nextjs being a framework to create statically rendered React code via static files or a server. A necessary part is to tell it when the users are going to another page and grabbing the correct code javascript to render the next page.

Below is a fundamental sample of implementing the Nextjs link. It will create an anchor tag. We would have the page change the URL without reloading the page. As well as changing the page to show the new fetched javascript.

1
2
3
4
5
import Link from 'next/link';
    
  <Link href="/about">
    <a>About Us</a>
  </Link>

Now, like most sites, we use styled component library. Suppose you wrap your styled component with the nextjs link. That will hurt your SEO as the URL will not pass the URL to the underlying anchor tag.

To fix this issue, we can use the passHref prop.

1
2
3
4
5
6
7
8

  import Link from 'next/link';
  import { Link as ChakraLink } from "@chakra-ui/react";

  <Link href="/about" passHref>
      <ChakraLink color="teal.500">About Us</ChakraLink>
  </Link>
  

You now know how to implement this on your site, with a few tricks to save some time.