usePathnameの使い方：現在のパスでナビゲーションを切り替える
usePathnameで現在のパスを読み、選択中のナビゲーションを表示します。クエリ文字列との違いと、書き換えルールがある場合の注意点を学びます。
usePathnameで現在のパスを読み、選択中のナビゲーションを表示します。クエリ文字列との違いと、書き換えルールがある場合の注意点を学びます。
対象環境と役割
App Routerで使う機能
この記事のApp Routerの例はNext.js 15以降の非同期リクエストAPIに合わせた書き方です。Next.js 16ではCache Componentsを有効にしない構成を前提とします。Pages Routerの記事とは配置先・実行場所が異なるため、プロジェクトのルーターとバージョンを先に確認してください。
TypeScriptの例は5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。app/layout.tsx を備えたApp Routerプロジェクトで実行してください。
引数・戻り値・受け渡すデータ
usePathname() は /docs のようなパスを返します。?q=react などの検索条件は含まないため、検索条件の取得には別のAPIを使います。
コード例を動かす
app/path-demo/page.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
export default function PathDemo() {
const pathname = usePathname();
return <main><h1>現在のパス</h1><p>{pathname}</p>
<nav aria-label="サンプルナビゲーション">
<Link href="/path-demo" aria-current={pathname === '/path-demo' ? 'page' : undefined}>パスの例</Link>
</nav>
</main>;
}実行結果と処理の順序
/path-demo?q=test を開いても、表示するのはパス部分です。aria-current により、見た目だけでなく支援技術にも現在位置を伝えられます。
複数リンクのサイトへ応用する場合は、完全一致か配下のURLを含めるかを決めます。単純な前方一致では /shopper を /shop の配下と誤判定するため、区切りのスラッシュも考慮します。
つまずきやすい点と使い分け
layout自体でURLを読み続けようとしない
共有layoutは遷移時に維持されます。現在位置の表示を小さなClient Componentに分けて配置すると、共有レイアウトとURLに反応する部分を分離できます。
書き換え後のURLと初期HTML
rewritesなどでブラウザーのパスと事前生成時のパスが異なる構成では、初期描画の不一致に注意します。影響する表示を小さく分け、必要ならマウント後に現在位置の表示を更新します。
静的出力で使えるか
ブラウザーでの処理は静的サイトでも利用できます。ただし遷移先のページは事前に生成されている必要があり、クライアントでの操作がサーバー機能や認可の代わりになるわけではありません。
確認課題と実務への応用
自分で値を変えて確認する
末尾スラッシュあり・なしの設定を変え、完全一致の条件が適切か確認します。配下を選択扱いにする場合は /shop、/shop/item、/shopper の3ケースを用意してください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。