usePathname

usePathname は、現在の URL の パス名 を読み取ることができる クライアントコンポーネント 用のフックです。

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>現在のパス名: {pathname}</p>
}

usePathname は意図的に クライアントコンポーネント の使用を必要とします。クライアントコンポーネントは最適化されていないわけではなく、サーバーコンポーネント アーキテクチャの重要な一部であることに注意してください。

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

知っておくと便利:

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

パラメーター

const pathname = usePathname()

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

戻り値

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

例

ルート変更に応じて処理を実行する

'use client'

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

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // ここで何らかの処理を実行...
  }, [pathname, searchParams])
}