Loading & Error UI
Penjelasan
Next.js otomatis menampilkan file loading.js sebagai fallback SELAGI Server Component async di folder yang sama masih memuat data (berkat React Suspense di baliknya) — tidak perlu state loading manual. error.js otomatis ditampilkan kalau ada error yang dilempar SAAT render — WAJIB Client Component ('use client').
Contoh Konsep
// app/produk/loading.js
export default function Loading() {
return <p>Memuat produk...</p>;
}
// app/produk/error.js
'use client'; // error.js WAJIB Client Component
export default function Error({ error, reset }) {
return (
<div>
<p>Terjadi kesalahan: {error.message}</p>
<button onClick={() => reset()}>Coba Lagi</button>
</div>
);
}Praktikum
Buat app/artikel/loading.js yang menampilkan teks "Memuat artikel...". Buat juga app/artikel/error.js (Client Component) yang menampilkan pesan error.message dan tombol untuk memanggil reset().
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
loading.js dan error.js otomatis berlaku untuk SEMUA page.js di folder yang sama dan sub-foldernya (mirip layout.js) — kamu tidak perlu menulis kondisi loading/error manual di tiap Server Component satu-satu, cukup satu file di level folder yang tepat.