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を読み取ることはサポートされていません。このデザインは、ページ遷移間でレイアウト状態を保持することを意図的にサポートしています。
• 互換性モード:
  • usePathnameは、フォールバックルートがレンダリングされている場合、またはpagesディレクトリのページがNext.jsによって自動的に静的に最適化され、ルーターの準備ができていない場合にnullを返すことがあります。
  • next.configまたはMiddlewareでリライトを使用する際にusePathnameを使用する場合、ハイドレーション不一致エラーを避けるために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])
}