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でリライトを使用する場合、ハイドレーションの不一致エラーを避けるためにuseStateとuseEffectも併用する必要があります。詳細についてはリライトの例を参照してください。
  • プロジェクト内にappとpagesの両方のディレクトリが検出された場合、Next.jsは自動的に型定義を更新します。

パラメータ

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