Custom NextJS Navigation Link (NextJS)

By default NextJS doesn't provide functionality to highlight an active link. But we could easily fix this functionality by creating own NavigationLink component:

'use client'
import {FC, ReactNode } from 'react'
import { usePathname } from 'next/navigation'
import Link, { LinkProps } from 'next/link'

const NavigationLink: FC<
  LinkProps & {
    href: string
    children: ReactNode
  }
> = (props) => {
  const pathname = usePathname()
  const { href } = props

  const active = href === pathname
  return (
    <Link
      {...props}
      className={active && 'active'}
    />
  )
}

export default NavigationLink

and after that you could be able to use it

  <NavigationLink href="/some/path/route">Some Page Route</NavigationLink>

and that's it! enjoy 🙂