usePathname

2025-05-29

Written by: osgsm

Next.js の usePathname は、現在の URL の pathname を読み取ることを可能にする Client Component hook。

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

usePathname() は、引数を受け取らず、現在の pathname を stringとして返す。

次のように query string が URL に含まれる場合、それは return value には含まれない。

文言の追加のテスト

    .--.              .--.
   : (\ ". _......_ ." /) :
    '.    `        `    .'
     /'   _        _   `\
    /     0}      {0     \
   |       /      \       |
   |     /'        `\     |
    \   | .  .==.  . |   /
     '._ \.' \__/ './ _.'
     /  ``'._-''-_.'``  \

参考

• Functions: usePathname | Next.js