Bunlar App Router'da özel dosyalardır ve bir rota segmenti için yükleme ve hata durumlarını otomatik olarak sağlarlar — Next.js bunları React Suspense ve Error Boundaries ile bağlar, böylece o ortak kodu yazmanız gerekmez.
() {
;
}
Next.js, segmentin page.tsx'ini bu fallback ile bir <Suspense> sınırına otomatik olarak sarar. Async bir Server Component verisini beklerken, kullanıcı loading.tsx'den UI'ı hemen görür — daha sonra gerçek içerik akışa katılır. Manual yükleme durumu yönetimi yok.
User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it
"use client"; // error components MUST be Client Components
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void; // retry: re-renders the segment
}) {
return (
<div>
<p>Something went wrong: {error.message}</p>
<button onClick={reset}>Try again</button>
</div>
);
}
Sayfa (veya veri getirme işlemi) bir hata atarsa, Next.js bunu bu Error Boundary ile yakalar ve tüm uygulamayı çökmek yerine error.tsx'i render eder. reset() işlevi, kullanıcının tam bir yeniden yükleme olmadan yeniden denemesine izin verir. Hatalar segmentle sınırlandırılır — layout ve uygulamanın geri kalanı bozulmaz kalır.
loading.tsx → Suspense fallback (loading state)
error.tsx → error boundary (must be "use client")
not-found.tsx → 404 UI (triggered by notFound())
global-error.tsx → catches errors in the root layout itself
Bu dosyalar size bir rota başına sağlam yükleme ve hata işleme ücretsiz olarak sağlar — akış sağlayan Suspense tabanlı yükleme UI'ı ve yeniden deneme işlevi olan segment kapsamlı hata sınırları.
Bileşenler aracılığıyla isLoading/error durumunu iletmek yerine, bir loading.tsx ve error.tsx bırakırsınız ve Next.js bağlantıyı yönetir, bu da dayanıklı, hızlı yanıt veren bir UX üretir.