メインコンテンツまでスキップ

useLinkStatus

useLinkStatusは、ナビゲーション中にLinkコンポーネントの読み込み状態を追跡するためのClient Componentフックです。特にprefetchingが無効になっている場合や、リンクされたルートに読み込み状態がない場合に、ページ遷移中の読み込みインジケーターを表示するために使用できます。

app/loading-indicator.tsx
'use client'

import { useLinkStatus } from 'next/navigation'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? <span>⌛</span> : null
}
app/header.tsx
import Link from 'next/link'
import LoadingIndicator from './loading-indicator'

export default function Header() {
  return (
    <header>
      <Link href="/dashboard" prefetch={false}>
        Dashboard <LoadingIndicator />
      </Link>
    </header>
  )
}

Good to know:

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

パラメータ​

const { pending } = useLinkStatus()

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

戻り値​

useLinkStatusは、1つのプロパティを持つオブジェクトを返します：

プロパティ型説明
pendingboolean履歴が更新される前はtrue、更新後はfalse

例​

新しいクエリパラメータでのナビゲーション時のユーザーエクスペリエンスの向上​

この例では、カテゴリ間のナビゲーションがクエリ文字列（例：?category=books）を更新します。しかし、ページが応答しないように見えることがあります。これは、<PageSkeleton />フォールバックが既存のコンテンツを置き換えないためです（不要な読み込みインジケーターの防止を参照）。

useLinkStatusフックを使用して、アクティブなリンクの横に軽量な読み込みインジケーターをレンダリングし、データがフェッチされている間にユーザーに即時のフィードバックを提供できます。

app/components/loading-indicator.tsx
'use client'

import { useLinkStatus } from 'next/navigation'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? <span>⌛</span> : null
}
app/page.tsx
import { useSearchParams } from 'next/navigation'
import Link from 'next/link'
import { Suspense } from 'react'
import LoadingIndicator from './loading-indicator'

function MenuBar() {
  return (
    <div>
      <Link href="?category=electronics">
        Electronics <LoadingIndicator />
      </Link>
      <Link href="?category=clothing">
        Clothing <LoadingIndicator />
      </Link>
      <Link href="?category=books">
        Books <LoadingIndicator />
      </Link>
    </div>
  )
}

async function ProductList({ category }: { category: string }) {
  const products = await fetchProducts(category)

  return (
    <ul>
      {products.map((product) => (
        <li key={product}>{product}</li>
      ))}
    </ul>
  )
}

export default async function ProductCategories({
  searchParams,
}: {
  searchParams: Promise<{
    category: string
  }>
}) {
  const { category } = await searchParams

  return (
    <Suspense fallback={<PageSkeleton />}>
      <MenuBar />
      <ProductList category={category} />
    </Suspense>
  )
}
バージョン変更内容
v15.3.0useLinkStatusが導入されました。