Next.js: useLinkStatus で「押したリンクが遷移待ち」の表示を出す

next/link の useLinkStatus() は、<Link> の子孫コンポーネントの中で { pending } を返す。遷移先の読み込みに時間がかかるとき、押したリンクの横にだけスピナーなどを出せる。

いつ使うか

動的ルートで loading.js がなく、クリックしても画面が変わらないように見える
プリフェッチを切っている、または低速回線で遷移に時間がかかる

まず検討するのは loading.js（遷移が即座に始まり、スケルトンが出る）。それでも「押したことが伝わらない」ときの補助として使う。

書き方

tsx

// app/ui/link-hint.tsx
"use client";
import { useLinkStatus } from "next/link";

export function LinkHint() {
  const { pending } = useLinkStatus();
  return <span aria-hidden className={pending ? "hint is-pending" : "hint"} />;
}

tsx

// 使う側
import Link from "next/link";
import { LinkHint } from "./ui/link-hint";

<Link href="/dashboard/reports">
  レポート <LinkHint />
</Link>

注意点

<Link> の子孫でしか使えない。ページ全体の遷移状態を取るフックではない。
遷移がすぐ終わる場合にチラつかないよう、CSS で表示に少し遅延（transition-delay など）を入れるとよい。
Next.js 15.3 で追加された API。手元のバージョンのドキュメントで確認する。

出典

@itsthishanth · 2026-10-25
Next.js ドキュメント useLinkStatus: nextjs.org