next-js-active-route/dist/index.js

Active link component for Next.JS App Router, can be used in any component

import * as React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs) {
    return twMerge(clsx(inputs));
}

const NavLink = ({ href, activeClassName, exact = false, className = "", children, ...props }) => {
    const pathname = usePathname();
    const isActive = exact
        ? href === pathname
        : pathname?.includes(href);
    return (React.createElement(Link, { href: href, className: cn(className ?? "", isActive && activeClassName), ...props }, children));
};

export { NavLink };