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を返す可能性があります。
  • 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(() => {
    // Do something here...
  }, [pathname, searchParams])
}