Next.js: Active link

index.ts

const { pathname } = useRouter()

const active: Record<string, boolean> = useMemo(() => {
    return [
      { key: 'home', url: '/' },
      { key: 'about', url: '/about' },
      { key: 'contact', url: '/contact' }
    ].reduce((object, link) => {
      object[link.key] = pathname === link.url
      return object
    }, {})
  }, [pathname])
  
<a className={cx({ 'text-blue': active.home, 'text-gray': !active.home })} />
<a className={cx({ 'text-blue': active.about, 'text-gray': !active.about })} />
<a className={cx({ 'text-blue': active.contact, 'text-gray': !active.contact })} />