Style active link in NextJS

NextActiveLink.js

// Using className

import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";

const NavLink = ({ children, activeClassName, ...props }) => {
  const router = useRouter();
  const child = React.Children.only(children);
  
  // Check if the pathname is equal to the href prop
  const isActive = router.pathname === props.href
  
  let className = child.props.className || "";
  
  if (router.pathname === props.href && props.activeClassName) {
    className = `${className} ${activeClassName}`.trim();
  }

  return <Link {...props}>{React.cloneElement(child, { className })}</Link>;
};


// Using render prop

const NavLink = ({ children, ...props }) => {
  const router = useRouter();
  let isActive = router.pathname === props.href;
  
  return (
    <Link {...props}>
      {typeof children === "function" ? children(isActive) : children}
    </Link>
  );
};

// Usage

export const SampleLink = ({ href, ...props }) => {
  return (
    <NavLink href={href}>
      {isActive => (
        <a style={{color: isActive ? "red" : "gray"}} {...props} />
      )}
    </NavLink>
  );
};