Active Link Component for Next.js 13+

activeLink.jsx

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

const ActiveLink = ({ children, ...props }) => {
    const router = useRouter();
    const child = Children.only(children);
    let className = child.props.className || '';

    if (router.pathname === props.href && props.activeClassName) 
        className = `${className} ${props.activeClassName}`.trim();

    delete props.activeClassName;

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

export default ActiveLink;