Loading၊ Error နှင့် Not Found UI

User က link နှိပ်ပြီး ဘာမှမပြောင်းဘဲ တိတ်နေတဲ့နှစ်စက္ကန့်ဟာ app ပျက်သွားပြီလို့ ထင်စေပါတယ်။ Loading၊ expected not-found နဲ့ unexpected error ကို ခွဲပြရင် app က ပိုယုံကြည်ရပါတယ်။

နားလည်ထားရမယ့် အချက်

loading.tsx က route segment အတွက် fallback UI ဖြစ်ပြီး navigation ချက်ချင်းတုံ့ပြန်စေပါတယ်။ notFound() က data မရှိတာလို မျှော်မှန်းနိုင်တဲ့ 404 အခြေအနေကို not-found.tsx ဆီပို့ပါတယ်။ error.tsx က မမျှော်လင့်တဲ့ exception ကို error boundary နဲ့ဖမ်းပြီး retry လုပ်ခွင့်ပေးပါတယ်။ Error component က interactivity လိုလို့ Client Component ဖြစ်ရပါတယ်။

အတူတူ စမ်းရေးကြည့်မယ်

// app/notes/loading.tsx
export default function Loading() {
  return <p>မှတ်စုများ ဖွင့်နေသည်…</p>;
}

// app/notes/error.tsx
"use client";
export default function ErrorPage({
  unstable_retry,
}: {
  error: Error;
  unstable_retry: () => void;
}) {
  return <button onClick={unstable_retry}>ပြန်စမ်းကြည့်မယ်</button>;
}

// app/notes/not-found.tsx
export default function NotFound() {
  return <h2>ဒီမှတ်စုကို မတွေ့ပါ</h2>;
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

Files သုံးခုကို route folder တစ်ခုတည်းမှာထားပါ။ Loading က data စောင့်ချိန်၊ not-found က record မရှိချိန်၊ error က exception ဖြစ်ချိန် ပေါ်လာပါတယ်။ အားလုံးကို “တစ်ခုခုမှားနေသည်” တစ်မျိုးတည်းမပြသင့်ပါဘူး။

Loading၊ retryable error နှင့် 404 အခြေအနေတိုင်းအတွက် သင့်တော်သော UI ပေါ်မည်။

Next.js — Error Handling — Next.js