Styling link according to current path.

NextJs-Active_Link.tsx

import { Url } from "next/dist/shared/lib/router/router";
import Link from "next/link";
import { useRouter } from "next/router";
import { MouseEvent } from "react";

type Props = {
  children?: React.ReactNode;
  href: Url | string;
};

function ActiveLink({ children, href }: Props) {
  const router = useRouter();
  const style = {
    marginRight: 10,
    color: router.asPath === href ? "red" : "black",
  };

  const handleClick = (e: MouseEvent<HTMLAnchorElement, MouseEvent>) => {
    e.preventDefault();
    router.push(href);
  };

  return (
    <Link href={href} onClick={(e) => handleClick} style={style}>
      {children}
    </Link>
  );
}

export default ActiveLink;