For my latest project, I wanted to change the background color of the active navigation link in the <Header> when being clicked. When working with <Link> in React (using React-Router) in the past, I had the possibility to add an activeClassName to the <Link> to change the style when being active. But this built-in <Link> is not available in NextJS. Let me show you the differences and how you can add an active class to a <Link> in NextJS.

Table Of Contents

1. React's activeClassName
2. Create An Active Link In NextJS

1. React's activeClassName

This special version of the <Link> tag is called <NavLink> and adds styling attributes to the rendered element when it matches the current URL. There are two different ways to add styling.

activeClassName: string

The class is given to the element when it is active by writing:

<NavLink to="/about" activeClassName="active">
  About
</NavLink>

activeStyle: object

The styles is applied to the element when it is active by writing:

<NavLink to="/about" activeStyle={{fontWeight: "bold"}}>
  About
</NavLink>

2. Create An Active Link In NextJS

The default <Link> component from NextJS doesn't allow to distinguish between active and non-active links. In NextJS, you can use the built-in router to detect an active link.

I am using the useRouter hook inside my "Header function component" and created a ternary operator to check if the <Link> to style matches the currently displayed route.

Here's the code:

import Link from 'next/link';
import { useRouter } from 'next/router';

export const Header = () => {
  const router = useRouter();

  return (
    <header>
      <Link href="/">
        <a className={router.pathname == "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  )
}

For more information on next/router check out the documentation.

Thanks for your reading and time. I really appreciate it!