Today I Learned

usePathname is a Client Component hook that lets you read the current URL's pathname.

'use client'

import { usePathname } from 'next/navigation' 

export default function ExampleClientComponent() {  
  const pathname = usePathname()  
  
  return <p>Current pathname: {pathname}</p>
}

usePathname intentionally requires using a Client Component. It's important to note Client Components are not a de-optimization. They are an integral part of the Server Components architecture.

A interesting way to use it is like to modify the classNames in active routes as:

<Link 
  key={link.name}
  href={link.href}            
  className={clsx(              
     'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
    {               
      'bg-sky-100 text-blue-600': pathname === link.href,
     },            
    )}         
   >            
   <LinkIcon className="w-6" />            
     <p className="hidden md:block">{link.name}</p>          
</Link>