loading / error / not-found

なぜ学ぶか： Reactのフェーズで「4状態（読み込み中・エラー・空・正常）」を学びました。Next.jsはそのうち2つを、ファイルを置くだけで実現できます。例を見てください。

まずはこの例を見てみましょう

// app/posts/loading.tsx — ページの準備中、自動で表示される
export default function Loading() {
  return <p>読み込み中…</p>;
}

// app/posts/error.tsx — エラーが起きたら自動で表示される
"use client"; // 再試行ボタンがあるのでブラウザ行き
export default function ErrorPage({ unstable_retry }: { unstable_retry: () => void }) {
  return (
    <div>
      <p>読み込めませんでした。</p>
      <button onClick={() => unstable_retry()}>再試行</button>
    </div>
  );
}

page.tsxと同じフォルダに「置くだけ」。importも呼び出しも不要で、自動で使われます。

コード例

// ===== app/posts/loading.tsx（データ取得中に自動表示）=====
export default function Loading() {
  return <p>読み込み中…</p>;
}

// ===== app/posts/error.tsx（エラー時に自動表示・'use client' 必須）=====
"use client";
export default function ErrorPage({ unstable_retry }: { unstable_retry: () => void }) {
  return (
    <div>
      <p>読み込めませんでした。</p>
      <button onClick={() => unstable_retry()}>再試行</button>
    </div>
  );
}

手書きで4状態の分岐を書く代わりに、Next.jsはファイルを置くだけで肩代わりしてくれます。AIは古い書き方（resetを再試行ボタンにする）で生成しがちですが、resetはデータを取り直さずに描き直すだけ。取り直して再試行するのはunstable_retryです。