︙

usePathname

usePathnameは、現在の URL の pathname を読み取ることができるClient Components hook です。

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

app/example-client-component.js

'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 が非最適化ではないことに注意が必要です。それらはServer Componentsアーキテクチャの不可欠な部分です。

例えば、usePathnameを持つ Client Component は初めてページを読み込んだときに HTML にレンダリングされます。新しい route へ移動するとき、この component を再度取得する必要はありません。代わりに、component は一度だけ(client JavaScript バンドル内で)ダウンロードされ、現在の状態に基づいて再レンダリングされます。

Good to know:

現在の URL をServer Componentから読み取ることはサポートされていません。この設計は、ページのナビゲーションをまたいで layout の状態が保持されることをサポートするための意図的なものです。

互換性モード：

usePathnameは、fallback routeがレンダリングされている場合や、 pagesディレクトリページが Next.js によって自動的に静的に最適化され、 router が準備できていない場合にnullを返すことができます。

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

Parameters

const pathname = usePathname();

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

Returns

usePathnameは現在の URL の pathname を string として返します。例えば：

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

Examples

route の変更に対して何か response をする

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

app/example-client-component.js

'use client'

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

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Do something here...
  }, [pathname, searchParams])
}

Version	Changes
`v13.0.0`	`usePathname` 導入されました。