Menambahkan Loading dan Error UI
Menambahkan loading.tsx dan error.tsx pada route courses di local Next.js project.
Tujuan belajar
- Menambahkan loading.tsx pada route segment lokal
- Menambahkan error.tsx sebagai Client Component dengan recovery
- Menguji file placement dan error fallback secara aman
- Membedakan pengujian lokal dari validasi otomatis
Isi lesson
5 blok- 1.Tambahkan feedback route pada project yang berjalanBelum selesaiWajib
- 2.Dua file route behavior di coursesBelum selesaiWajib
- 3.Tambahkan dan cek route behavior lokalBelum selesaiWajib
- 4.Error UI tidak muncul atau tombol tidak bisa dipakaiBelum selesaiOpsional
- 5.RingkasanBelum selesaiWajib
Tambahkan feedback route pada project yang berjalan
WajibSebelumnya kamu sudah mempelajari loading.tsx dan error.tsx melalui contoh terstruktur. Di project lokal, tempatkan keduanya di route `app/dashboard/courses` agar behavior menempel pada route yang kamu buat. Loading UI memberi feedback saat content belum siap. Error UI memberi fallback dan recovery ketika error render terjadi.
Pada project kecil yang sangat cepat, loading UI mungkin sulit terlihat setiap saat. Itu bukan berarti file salah. Fokus pada lokasi file dan build yang bersih. Untuk error UI, lakukan pengujian sementara dengan hati-hati, lalu hapus kode pemicu error sebelum commit.
Bagian ini memengaruhi progres lesson.
Dua file route behavior di courses
Wajib// app/dashboard/courses/loading.tsx
export default function Loading() {
return <p aria-busy="true">Memuat course...</p>;
}
// app/dashboard/courses/error.tsx
"use client";
export default function CourseError({
unstable_retry,
}: {
unstable_retry: () => void;
}) {
return (
<section role="alert">
<p>Course belum bisa dimuat.</p>
<button type="button" onClick={() => unstable_retry()}>
Coba lagi
</button>
</section>
);
}loading.tsx dapat tetap sebagai Server Component. error.tsx memakai "use client" karena tombol recovery memerlukan event handler. Pada versi Next.js project ini, callback recovery dari contoh resmi bernama unstable_retry. Simpan kedua file di folder courses yang sama agar scope behavior jelas.
Bagian ini memengaruhi progres lesson.
Tambahkan dan cek route behavior lokal
WajibKerjakan di perangkat kamu:
- Buat `app/dashboard/courses/loading.tsx` dengan pesan loading spesifik.
- Buat `app/dashboard/courses/error.tsx` dengan "use client", fallback, dan tombol recovery.
- Pastikan dev server berjalan tanpa build error.
- Buka `/dashboard/courses` dan cek route tetap dapat dimuat.
- Untuk menguji error UI, tambahkan sementara `throw new Error("Test course route error")` di page courses, lihat fallback, lalu hapus throw tersebut segera setelah selesai.
- Jangan commit kode pemicu error test.
FluentStack tidak menjalankan project lokalmu. Tandai selesai berdasarkan file dan browser kamu sendiri.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
OpsionalError UI tidak muncul atau tombol tidak bisa dipakai
Pastikan error.tsx berada di folder route yang ingin dilindungi dan "use client" berada di baris paling atas. Jika memakai contoh dari sumber lain, cek callback recovery pada dokumentasi yang sesuai versi Next.js projectmu. Jangan membiarkan `throw new Error` test di page sebelum melanjutkan lesson atau membuat commit.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- loading.tsx dan error.tsx ditempatkan di folder route yang ingin diberi behavior.
- error.tsx menjadi Client Component saat menyediakan tombol recovery.
- Project kecil mungkin tidak selalu memperlihatkan loading state, tetapi file placement tetap dapat diperiksa.
- Uji error sementara harus dibersihkan sebelum project disimpan ke Git.
- Berikutnya, kamu akan memberi metadata title dan description pada route.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Tambahkan feedback route pada project yang berjalan.