usePathname

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

補足：cacheComponentsが有効な場合、ルートに動的パラメータがあるとusePathnameの周りにSuspense境界が必要になる場合があります。generateStaticParamsを使用する場合、Suspense境界はオプションです。

'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にレンダリングされます。新しいルートへのナビゲーション時に、このコンポーネントを再取得する必要はありません。代わりに、コンポーネントは1回ダウンロードされ（クライアントJavaScriptバンドル内）、現在の状態に基づいて再レンダリングされます。

補足：

• Server Componentから現在のURLを読み取ることはサポートされていません。この設計はページナビゲーション全体でレイアウト状態が保持されることをサポートするためのものです。
• ページが静的に事前レンダリングされており、アプリがnext.configに書き換えまたはファイルProxyを持っている場合、usePathname()でパス名を読み取ると、ハイドレーションミスマッチエラーが発生する可能性があります。初期値はサーバーから取得され、ルーティング後の実際のブラウザパス名と一致しない場合があります。この問題を軽減する方法については、例を参照してください。

パラメータ

const pathname = usePathname()

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

戻り値

usePathnameは現在のURLのパス名を文字列で返します。例えば：

例

ルート変更に応じてアクションを実行する

'use client'
 
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
 
function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // ここで何か処理を行う...
  }, [pathname, searchParams])
}

書き換えによるハイドレーションミスマッチを避ける

ページが事前レンダリングされる場合、HTMLはソースパス名に対して生成されます。その後、next.configまたはProxyを使用した書き換えでページに到達する場合、ブラウザURLは異なる可能性があり、usePathname()はクライアントで書き換えられたパス名を読み取ります。

ハイドレーションミスマッチを避けるために、UIを設計して、クライアントパス名に依存する部分が小さく、分離されたものになるようにします。サーバーで安定したフォールバックをレンダリングし、マウント後にその部分を更新します。

'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>
  )
}