useLinkStatus

useLinkStatus フックを使用すると、<Link> の 保留中 (pending) 状態を追跡できます。新しいルートへのナビゲーションが完了するまで、ユーザーに対してインラインの視覚的なフィードバック（スピナーやテキストのグリマーなど）を表示するのに役立ちます。

useLinkStatus が有用なケース:

• プリフェッチ が無効化されているか進行中で、ナビゲーションがブロックされている場合
• 遷移先のルートが動的 かつ 即時ナビゲーションを可能にする loading.js ファイルを含んでいない場合

'use client'

import { useLinkStatus } from 'next/link'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}

豆知識:

• useLinkStatus は Link コンポーネントの子孫コンポーネント内で使用する必要があります
• このフックは Link コンポーネントに prefetch={false} が設定されている場合に最も有用です
• リンク先のルートがプリフェッチされている場合、保留中の状態はスキップされます
• 複数のリンクを連続してクリックした場合、最後のリンクの保留中状態のみが表示されます
• このフックは Pages Router ではサポートされておらず、常に { pending: false } を返します

パラメータ

const { pending } = useLinkStatus()

useLinkStatus はパラメータを取りません。

戻り値

useLinkStatus は単一のプロパティを持つオブジェクトを返します:

使用例

インライン読み込みインジケーター

プリフェッチが完了する前にユーザーがリンクをクリックした場合に備えて、ナビゲーションが進行中であることを視覚的にフィードバックすると便利です。

'use client'

import { useLinkStatus } from 'next/link'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}

高速ナビゲーションの適切な処理

新しいルートへのナビゲーションが高速な場合、ユーザーは不要な読み込みインジケーターの点滅を見る可能性があります。ユーザーエクスペリエンスを向上させ、ナビゲーションに時間がかかる場合にのみ読み込みインジケーターを表示する方法の1つは、初期アニメーション遅延（例: 100ms）を追加し、アニメーションを不可視（例: opacity: 0）で開始することです。

.spinner {
  /* ... */
  opacity: 0;
  animation:
    fadeIn 500ms 100ms forwards,
    rotate 1s linear infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}