ActiveLink component for Next.js 9

ActiveLink.tsx

/**
 * Here using data-attributes, but you could use className, or render props as well
 */

import React from 'react';
import Link, { LinkProps } from 'next/link';
import { useRouter } from 'next/router';

const ActiveLink: React.FC<LinkProps> = props => {
  const router = useRouter();

  if (typeof props.href === 'object') {
    throw new TypeError(
      '[ActiveLink] href props as an object is deprecated since Next.js 9'
    );
  }
  if (typeof props.as === 'object') {
    throw new TypeError(
      '[ActiveLink] as props as an object is deprecated since Next.js 9'
    );
  }

  const isActive = router.asPath.startsWith(props.as || props.href);
  const isExactActive = (props.as || props.href) === router.asPath;

  return (
    <Link {...props}>
      <a data-is-active={isActive} data-is-exact-active={isExactActive}>
        {props.children}
      </a>
    </Link>
  );
};

export default ActiveLink;