usePathname()

import { usePathname } from 'next/navigation'

const pathname = usePathname()

usePathname is the App Router's answer to router.pathname. It returns the path portion of the current URL as a plain string and re-renders the component on every navigation, which makes it the standard way to mark a link as active.

Reach for it when the UI depends on where the user is rather than on route data: active navigation states, an analytics page-view effect, a breadcrumb, or a layout that hides a sidebar on one route. If you only need the segment directly below the layout you are in, useSelectedLayoutSegment is cheaper to reason about, because it already ignores anything deeper in the tree.

What trips people up

• It is client-only. A Server Component cannot read the URL; that restriction exists so a shared layout does not have to re-render on navigation. Push the hook down into a small 'use client' component and import that into the layout.
• Rewrites cause hydration mismatches. A statically prerendered page emits HTML for the source path; if the visitor arrived through a rewrite in next.config or a Proxy file, the browser path differs and React complains. Render a stable fallback and set the real value in an effect.
• Prefix matching. pathname === '/dashboard' will not match /dashboard/invoices. Decide explicitly whether an active link should match exactly or by prefix.
• With cacheComponents enabled, the hook suspends on routes whose dynamic params are not known at build time, so it needs a Suspense boundary above it.

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

const links = [
  { href: '/dashboard', label: 'Overview' },
  { href: '/dashboard/invoices', label: 'Invoices' },
  { href: '/dashboard/customers', label: 'Customers' },
]

export default function NavLinks() {
  const pathname = usePathname()

  return (
    <nav>
      {links.map((link) => {
        // '/dashboard' must match exactly, the others also match children
        const isActive =
          pathname === link.href ||
          (link.href !== '/dashboard' && pathname.startsWith(`${link.href}/`))

        return (
          <Link
            key={link.href}
            href={link.href}
            aria-current={isActive ? 'page' : undefined}
          >
            {link.label}
          </Link>
        )
      })}
    </nav>
  )
}

'use client'

import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export function PageViewTracker() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    const query = searchParams.toString()
    const url = query ? `${pathname}?${query}` : pathname
    window.analytics?.page(url)
  }, [pathname, searchParams])

  return null
}

'use client'

import { useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'

export default function PathnameBadge() {
  const pathname = usePathname()
  const [clientPathname, setClientPathname] = useState('')

  useEffect(() => {
    setClientPathname(pathname)
  }, [pathname])

  return (
    <p>
      Current pathname: <span>{clientPathname}</span>
    </p>
  )
}

// app/dashboard/layout.tsx  (Server Component — no 'use client')
import NavLinks from '@/app/components/nav-links'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      <aside>
        <NavLinks />
      </aside>
      {children}
    </section>
  )
}