loading.tsx と error.tsx はどのように動作しますか？

Question

Accepted Answer

これらは App Router の**特別なファイル**で、ルートセグメントの読み込み状態とエラー状態を自動的に提供します。Next.js は React Suspense と Error Boundaries で自動的に接続するため、ボイラープレートコードを書く必要がありません。 ## loading.tsx — Suspense による即座な読み込み UI ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // shown while the page's data is being fetched } ``` Next.js はセグメントの `page.tsx` を自動的に `` 境界でラップします。このファイルがフォールバックになります。非同期の Server Component がデータを待機している間、ユーザーは `loading.tsx` の UI をすぐに見ることができ、その後、実際のコンテンツがストリーミングされます。手動の読み込み状態管理は必要ありません。 ```text User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it ``` ## error.tsx — セグメント用のエラー境界 ```tsx "use client"; // error components MUST be Client Components export default function Error({ error, reset, }: { error: Error; reset: () => void; // retry: re-renders the segment }) { return (

Something went wrong: {error.message}

); } ``` ページ（またはそのデータフェッチ）がエラーをスロー場合、Next.js はこの Error Boundary でキャッチして `error.tsx` をレンダリングします。**アプリ全体をクラッシュさせることはありません**。`reset()` 関数を使用すると、ユーザーはページの完全なリロードなしに再試行できます。エラーは**セグメントに限定**されます。レイアウトとアプリの残りの部分は無傷のままです。 ## 関連する特別なファイル ```text loading.tsx → Suspense fallback (loading state) error.tsx → error boundary (must be "use client") not-found.tsx → 404 UI (triggered by notFound()) global-error.tsx → catches errors in the root layout itself ``` ## なぜ重要なのかこれらのファイルは、ルートごとに堅牢な読み込みとエラー処理を**無料で**提供します。Suspense ベースの読み込み UI はストリーミングを有効にし、セグメントスコープのエラー境界と再試行を提供します。 `isLoading`/`error` 状態をコンポーネント間で渡す代わりに、`loading.tsx` と `error.tsx` をドロップすれば、Next.js が配線を処理し、弾力的でレスポンシブな UX を生成します。