usePathname

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

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

usePathname は意図的にクライアントコンポーネントの使用を必須としています。クライアントコンポーネントは最適化を損なうものではないことに注意することが重要です。それらはサーバーコンポーネントアーキテクチャの不可欠な部分です。

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

知っておくと良いこと:

• サーバーコンポーネントから現在のURLを読み取ることはサポートされていません。この設計は、ページ遷移時にレイアウトの状態が保持されることをサポートするために意図的なものです。
• 互換モード
  • usePathname は、フォールバックルートがレンダリングされている場合、またはpagesディレクトリのページがNext.jsによって自動的に静的に最適化されており、ルーターが準備できていない場合にnullを返すことがあります。
  • When using usePathname with rewrites in next.config or Middleware, useState and useEffect must also be used in order to avoid hydration mismatch errors.
  • 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(() => {
    // Do something here...
  }, [pathname, searchParams])
}