メインコンテンツまでスキップ

usePathname

usePathnameは、現在のURLのpathnameを読み取ることができるClient Componentのフックです。

app/example-client-component.tsx
'use client'

import { usePathname } from 'next/navigation'

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

usePathnameは意図的にClient Componentを使用するために設計されています。Client Componentsは最適化を妨げるものではなく、Server Componentsアーキテクチャの重要な部分です。

たとえば、usePathnameを使用したClient Componentは初回のページロード時にHTMLにレンダリングされます。新しいルートに移動するとき、このコンポーネントを再取得する必要はありません。代わりに、このコンポーネントは一度（クライアントのJavaScriptバンドルで）ダウンロードされ、現在の状態に基づいて再レンダリングされます。

Good to know:

  • Server Componentから現在のURLを読み取ることはサポートされていません。この設計は、ページ遷移をしてもレイアウト状態を保持するために意図されたものです。
  • 互換モード:
    • fallbackルートがレンダリングされる際、またはpagesディレクトリのページがNext.jsによって自動静的最適化され、ルーターが準備完了でない際には、usePathnameがnullを返すことがあります。
    • next.configまたはMiddlewareで書き換えを使用する際には、ハイドレーションミスマッチエラーを避けるためにuseStateおよびuseEffectも使用する必要があります。詳細は書き換えの例を参照してください。
    • プロジェクト内にappディレクトリとpagesディレクトリの両方が検出されると、自動的に型が更新されます。

パラメータ​

const pathname = usePathname()

usePathnameはパラメータを取りません。

戻り値​

usePathnameは現在のURLのpathnameを文字列として返します。例えば：

URL戻り値
/'/'
/dashboard'/dashboard'
/dashboard?v=2'/dashboard'
/blog/hello-world'/blog/hello-world'

例​

ルートの変更に応じて何かを行う​

app/example-client-component.tsx
'use client'

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

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // ここに何らかの処理を書く
  }, [pathname, searchParams])
}
バージョン変更点
v13.0.0usePathname が導入されました