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

usePathname

usePathnameは、現在の URL のパス名を読み取るための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 は非最適化ではないことを強調しておきたいです。Client Components は、Server Componentsアーキテクチャの不可欠な要素です。

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

Good to know:

  • Server Componentから現在の URL を読み取ることはサポートされていません。この設計は、ページナビゲーションをまたいでもレイアウト状態が保持されるようにするための意図的なものです。
  • 互換モード：
    • usePathnameは、fallback routeがレンダリングされている場合、または Next.js によってpagesディレクトリのページがautomatically statically optimizedされており、Router が準備できていない場合にnullを返すことがあります。
    • Next.js は、プロジェクトにappとpagesの両方のディレクトリがあることを検出すると、自動的にタイプを更新します。

Parameters​

const pathname = usePathname()

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

Returns​

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

URLReturned value
/'/'
/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(() => {
    // Do something here...
  }, [pathname, searchParams])
}
VersionChanges
v13.0.0usePathname 導入