NextLink.tsximport NextLink, {LinkProps} from 'next/link'; import {useRouter} from 'next/router'; interface ActiveLinkProps extends LinkProps { activeClassName?: string; className?: string; } export function Link({ href, children, className: targetClassName = '', activeClassName, prefetch = false, ...props }: React.PropsWithChildren<ActiveLinkProps>) { const {asPath} = useRouter(); const className = targetClassName + (asPath === href && activeClassName ? ' ' + activeClassName : ''); return ( <NextLink href={href} {...props} className={className} prefetch={prefetch}> {children} </NextLink> ); } Usage pages/index.tsx<Link href={`${TEAMMATES_PAGE}/${teammate.id}`} className="text-blue-400 text-xs p-2 bg-blue-50 hover:bg-blue-100 rounded-md inline-flex items-center" activeClassName="underline" > View more <ChevronRightIcon className="h-3 w-3" /> </Link> Back to Snippets