ナビゲーションフック
リンクで足りない場面が2つある
Link は「押したら移る」だけの部品です。実際のアプリでは、それでは届かない場面が出てきます。
1つめは いま自分がどこにいるか。ナビの中で、開いているページの項目だけ色を変えたい。押す前から見た目を変えるので、クリックとは関係なく現在地を知る必要があります。
2つめは 押した瞬間ではなく、処理が終わってから移りたい。出品フォームを送って、登録が済んでからマイページへ移す。リンクでは、送信の成否と関係なく先に移動してしまいます。
この2つのために next/navigation があります。
usePathname はいまの URL を返す
"use client";
import { usePathname } from "next/navigation";
const pathname = usePathname();戻り値は /items のような文字列です。リンクの href と比べれば、その項目が現在地かどうかが分かります。
useRouter は移動を命令する
const router = useRouter();
router.push("/mypage");push は履歴に1つ積んで移ります。戻るボタンで戻ってこられます。フォームの送信後のように「もう戻ってきてほしくない」場合は replace を使い、履歴を差し替えます。
この2つはブラウザ側で動く
どちらもフックです。フックはブラウザ側でしか動かないので、使うファイルの先頭に "use client" と書きます。書き忘れると本物の Next.js ではエラーになります。ナビゲーションのように「押されたら反応する」部品は、基本的にブラウザ側の担当だと考えて構いません。この線引きそのものは第4章でじっくり扱います。
演習
現在地の色分けと、出品後の移動を作ります。