<NextLink /> abstraction

import NextLink, {LinkProps} from 'next/link';
import {useRouter} from 'next/router';
 
interface ActiveLinkProps extends LinkProps {
  activeClassName?: string;
  className?: string;
}
 
export function Link({
  href,
  children,
  className: targetClassName = '',
  activeClassName,
  prefetch = false,
  ...props
}: React.PropsWithChildren<ActiveLinkProps>) {
  const {asPath} = useRouter();
  const className =
    targetClassName +
    (asPath === href && activeClassName ? ' ' + activeClassName : '');
 
  return (
    <NextLink href={href} {...props} className={className} prefetch={prefetch}>
      {children}
    </NextLink>
  );
}

<Link
  href={`${TEAMMATES_PAGE}/${teammate.id}`}
  className="text-blue-400 text-xs p-2 bg-blue-50 hover:bg-blue-100 rounded-md inline-flex items-center"
  activeClassName="underline"
>
  View more
  <ChevronRightIcon className="h-3 w-3" />
</Link>