現在地ハイライト
いま、どこにいるのか
ナビゲーションが3本並んでいても、どれが今のページかが分からないと、利用者は自分の位置を見失います。今いる項目だけ色を変える、いわゆるアクティブリンクを付けます。
必要なのは「今の URL」です。Next.js は usePathname で教えてくれます。
const pathname = usePathname();
const active = pathname === "/items";ブラウザで動く部品だと宣言する
ここでひとつ約束が要ります。usePathname はブラウザ側で動くフックなので、使うファイルのいちばん上に "use client" と書きます。
"use client";
import { usePathname } from "next/navigation";理由は第4章でじっくり扱います。今は「next/navigation のフックを使うファイルには "use client" を付ける」と覚えておけば十分です。import より上、ファイルの先頭行に置きます。
トップページの落とし穴
判定を pathname.startsWith(link.href) と書くと、href が / の項目はどの URL でも当たってしまいます。/items も /mypage も / で始まるからです。
トップページだけは完全一致で見ます。
const active = link.href === "/" ? pathname === "/" : pathname.startsWith(link.href);前方一致を残しておくと、/mypage/listings にいるときもマイページの項目が光ります。深いページに入っても現在地が消えないので、こちらのほうが親切です。
演習
ナビの現在地に is-active を付けます。