読み込み・0件・404・失敗に備える

失敗の種類を分ける

検索が0件は正常。存在しない記事は404。入力ミスはフォームの検証結果。接続障害などの予期しない例外はエラーUIへ。全部を同じ「エラーです」で済ませず、利用者が次に何をすればよいかを伝えます。

規約ファイルで表示の境界を作る

loading.jsxは待機表示、not-found.jsxはnotFound()が呼ばれたときの表示、error.jsxは範囲内の予期しない例外へのフォールバックです。error.jsxはClient Componentです。同じ階層のlayout自身の例外まで必ず受け止めるわけではありません。

内部の詳細を、そのまま公開しない

DBの接続文字列や個人情報を画面のエラー文へ出さないようにします。利用者向けの説明と、開発者が原因を追える記録を分けましょう。イベントハンドラーのエラーがすべてerror.jsxに届くわけでもありません。

予期しない失敗の表示

'use client'

import Link from 'next/link'

export default function NotesError() {
  return (
    <section role="alert">
      <h2>ノートを表示できませんでした</h2>
      <p>時間をおいてもう一度お試しください。</p>
      <Link href="/">ホームへ戻る</Link>
    </section>
  )
}

エラー回復用propsのAPIは利用中の版で確認してください。現行公式では再取得を伴うretryと、状態を解除するresetを区別しています。

存在しないページの案内

import Link from 'next/link'

export default function NotFound() {
  return (
    <main>
      <h1>ページが見つかりません</h1>
      <Link href="/notes">ノート一覧を見る</Link>
    </main>
  )
}