В Next.js activeClassName— это свойство, которое можно использовать с компонентом Linkиз пакета next/link. Он позволяет вам указать имя класса CSS, которое будет применяться к активной ссылке, если она соответствует текущему URL-адресу. Свойство activeClassNameполезно для различного оформления активных ссылок, чтобы предоставить пользователям визуальную обратную связь.

Вот пример того, как вы можете использовать activeClassNameв Next.js:

import Link from 'next/link';
const Navigation = () => {
  return (
    <nav>
      <Link href="/" activeClassName="active">
        <a>Home</a>
      </Link>
      <Link href="/about" activeClassName="active">
        <a>About</a>
      </Link>
      <Link href="/contact" activeClassName="active">
        <a>Contact</a>
      </Link>
    </nav>
  );
};
export default Navigation;

В приведенном выше примере CSS-класс activeбудет применен к активной ссылке на основе текущего URL-адреса. Затем вы можете стилизовать активную ссылку с помощью CSS, чтобы каким-либо образом выделить ее.