nextjs active link that checks query string

NavLink.tsx

import clsx from "clsx";
import Link, { LinkProps } from "next/link";
import { useRouter } from "next/router";
import { useMemo } from "react";

export type NavLinkProps = LinkProps & {
  activeClassName?: string;
};

function isLinkActive(
  router: ReturnType<typeof useRouter>,
  href: LinkProps["href"]
) {
  if (typeof href === "string") {
    return router.asPath === href;
  }

  if ("pathname" in href && "query" in href) {
    const { pathname, query } = href;
    const { pathname: routerPathname, query: routerQuery } = router;
    const isPathnameEqual = routerPathname === pathname;
    const isQueryEqual = JSON.stringify(routerQuery) === JSON.stringify(query);

    return isPathnameEqual && isQueryEqual;
  }

  return false;
}

export const NavLink = (props: NavLinkProps) => {
  const router = useRouter();

  const isActive = useMemo(
    () => isLinkActive(router, props.href),
    [router, props.href]
  );

  return (
    <Link
      {...props}
      className={clsx(
        props.className,
        props.activeClassName && isActive ? props.activeClassName : null
      )}
    />
  );
};