usePathname

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

'use client'

import { usePathname } from 'next/navigation'

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

'use client'

import { usePathname } from 'next/navigation'

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

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

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

補足:

サーバーコンポーネント (Server Components) から現在の URL を読み取ることはサポートされていません。この設計は、ページナビゲーション間でレイアウト状態を保持できるようにするための意図的なものです。

互換性モード:

フォールバックルート (fallback route) がレンダリングされている場合や、pages ディレクトリのページが Next.js によって自動静的最適化 (automatically statically optimized) され、ルーターが準備できていない場合、usePathname は null を返すことがあります。

プロジェクト内に app と pages ディレクトリの両方が存在する場合、Next.js は自動的に型を更新します。

パラメータ

const pathname = usePathname()

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

戻り値

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

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

使用例

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

'use client'

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

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

'use client'

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

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

バージョン	変更点
`v13.0.0`	`usePathname` が導入されました。

パラメータ

戻り値

使用例

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

On this page