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

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 Componentはデオプティマイゼーションではなく、Server Componentsアーキテクチャの重要な部分です。

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

Good to know:

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

パラメータ​

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が導入されました。