nextjs-navigation

Next.js のナビゲーション

Next.js App Router のナビゲーションパターン、プリフェッチの動作、ナビゲーション固有の最適化に関する専門的なガイダンスです。

リンクのプリフェッチ動作

プリフェッチの動作は、App Router と以前の Next.js バージョンで大きく異なります。

App Router のプリフェッチ用 Props

• prefetch={false} - ホバー時も含め、すべてのプリフェッチを無効にします。以前の Next.js バージョンでは、これを指定してもホバー時にプリフェッチされました。
• prefetch={undefined} - 静的ルートのみをプリフェッチします。動的ルートはプリフェッチされません。
• prefetch={true} - 静的ルートと動的ルートの両方をプリフェッチします。

例：

// No prefetching at all
<Link href="/dashboard" prefetch={false}>Dashboard</Link>

// Prefetch static routes only (default behavior)
<Link href="/about" prefetch={undefined}>About</Link>

// Prefetch both static and dynamic routes
<Link href="/posts/[id]" prefetch={true}>Post</Link>

ナビゲーションの可能性が低い場合や、遷移先ページのリソース消費が大きい場合は、prefetch={false} を選択します。頻繁にアクセスされる動的ルートには prefetch={true} を使用すると、体感パフォーマンスが向上します。

Suspense 境界と検索パラメーター

検索パラメーターのみが変更される同一ページ内のナビゲーションでは、Suspense 境界は再度トリガーされません。そのため、クエリパラメーターを使ってフィルタリングやページネーションを行っても、ローディング状態は表示されません。

Suspense の再トリガーを強制する

変更される検索パラメーターを含む、一意の key プロパティを Suspense 境界に追加します。

import { Suspense } from 'react';

export default function Page({ searchParams }: { searchParams: { filter?: string } }) {
  return (
    <Suspense key={searchParams.filter} fallback={<Loading />}>
      <DataTable filter={searchParams.filter} />
    </Suspense>
  );
}

キーが変更されると、React は Suspense 境界をアンマウントして再マウントし、データの取得中にフォールバックを表示します。フィルター、ページネーション、またはデータ取得をトリガーする検索パラメーターには、このパターンを使用します。

型安全性

PageProps ヘルパー型

App Router でページコンポーネントの Props を適切に型付けするには、PageProps ヘルパー型を使用します。

import { PageProps } from 'next';

export default function Page({ params, searchParams }: PageProps) {
  // params and searchParams are properly typed
}

これにより、手動で型を定義しなくても、ルートパラメーターと検索パラメーターの型安全性を確保できます。

クライアント側の状態の保持

next.config.js で cacheComponents フラグが有効になっている場合、Next.js は React の <Activity> コンポーネントを使用して、クライアント側のナビゲーション中にコンポーネントの状態を保持します。

この実験的な機能を有効にします。

// next.config.js
module.exports = {
  experimental: {
    cacheComponents: true,
  },
};

別のページに移動してから同じルートに戻っても、コンポーネントの状態（フォーム入力、スクロール位置、ローカル状態）は保持されます。これにより、複数ステップのフローや、入力途中のフォームにユーザーが戻る場合のユーザー体験が向上します。