Special Files: loading.tsx, error.tsx, & not-found.tsx — Belajar Next.js

🎯 Poin-Poin Utama Modul Ini:

loading.tsx secara otomatis membungkus Halaman dengan React Suspense boundary
error.tsx bertindak sebagai Error Boundary (wajib Client Component 'use client')
not-found.tsx menampilkan halaman 404 kustom dan bisa dipicu via fungsi notFound()

⚡ Konvensi File Spesial UI Next.js 16

Next.js menyediakan berkas deklaratif untuk menangani status loading & error tanpa mengotori logika komponen utama:

loading.tsx: Menampilkan Skeleton UI atau Spinner secara instan saat data server sedang di-fetch.
error.tsx: Menangkap runtime error pada child component & menyediakan tombol recovery "Try Again".
not-found.tsx: Tampilan khusus jika resource tidak ditemukan.

💻 Contoh error.tsx Boundary

app/events/error.tsx

"use client"; // Error boundary WAJIB berupa Client Component

import { useEffect } from "react";

export default function ErrorBoundary({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("Caught error:", error);
  }, [error]);

  return (
    <div className="p-8 text-center">
      <h2 className="text-xl font-bold text-red-500">Terjadi Kesalahan System!</h2>
      <button 
        onClick={() => reset()}
        className="mt-4 bg-gray-800 text-white px-4 py-2 rounded-md"
      >
        Coba Lagi 🔄
      </button>
    </div>
  );
}