DEV Community

Cover image for Detect active links in Next.js
Chris Bongers
Chris Bongers

Posted on • Originally published at

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

Before we can add 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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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

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

import {useRouter} from 'next/router';
Enter fullscreen mode Exit fullscreen mode

And inside our Header function define it like so:

const router = useRouter();
Enter fullscreen mode Exit fullscreen mode

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

  className={`cursor-pointer p-4 ml-2 text-white ${
    router.asPath === `/${item.node.connectedNode.node.slug}`
      ? 'underline'
      : ' hover:underline'
Enter fullscreen mode Exit fullscreen mode

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.

Active link in Next.js

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

Thank you for reading, and let's connect!

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

Top comments (2)

atapas profile image
Tapas Adhikary

Chris, keep them in a next.js series. Great going.

dailydevtips1 profile image
Chris Bongers

Thanks Tapas!

Gotta come up with some new Next.js stuff, but also checking out GraphQL a lot lately ๐Ÿ˜‚