Detect active links in Next.js

Now that we have an almost complete Next.js website driven by WordPress, let’s see how we can detect the active links.

Feel free to follow along by using this GitHub repo as your starting point.

Migrating to Next.js Links permalink

Before adding our active link check we need to migrate our existing hrefs to the Next.js Link component.

To do so, open up the Header.js component and include the Link component.

import Link from 'next/link';

Then we need to wrap our href into this Link component like so:

<Link href={item.node.connectedNode.node.slug}>
  <a className="cursor-pointer p-4 ml-2 text-white">{item.node.label}</a>
</Link>

This doesn’t change the effect we see on the frontend; however, it’s the best way to navigate Next.js applications.

Adding the active route check permalink

Ok, so now how do we check which is the active link?

First, we need to introduce the useRouter from the Next router.

import {useRouter} from 'next/router';

And inside our Header function define it like so:

const router = useRouter();

Then we can use a dynamic className on our a element.

<a
  className={`cursor-pointer p-4 ml-2 text-white ${
    router.asPath === `/${item.node.connectedNode.node.slug}`
      ? 'underline'
      : ' hover:underline'
  }`}
>
  {item.node.label}
</a>

We use the router asPath, which returns something like /sample-page to check against the slug we are setting.

In my case, I have to include the / in the beginning because it’s not set on my slug object.

And that’s it. We now have styled our active pages with an underline.

And as usual, you can find the complete code on this GitHub repo.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter