Dies sind spezielle Dateien im App Router, die automatisch Loading- und Error-States für ein Route-Segment bereitstellen — Next.js verbindet sie mit React Suspense und Error Boundaries, sodass du diesen Boilerplate-Code nicht schreiben musst.
() {
;
}
Next.js umhüllt die page.tsx des Segments automatisch mit einer <Suspense>-Grenze und nutzt dies als Fallback. Während eine asynchrone Server Component auf ihre Daten wartet, sieht der Benutzer sofort die loading.tsx-UI — dann streamt der eigentliche Inhalt herein. Keine manuelle Loading-State-Verwaltung.
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>
);
}
Wenn die Seite (oder ihr Datenabruf) einen Fehler wirft, fängt Next.js ihn mit dieser Error Boundary ab und rendert error.tsx statt die ganze App zum Absturz zu bringen. Die Funktion reset() ermöglicht dem Benutzer einen erneuten Versuch ohne vollständiges Neuladen. Fehler sind auf das Segment begrenzt — das Layout und der Rest der App bleiben intakt.
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
Diese Dateien geben dir robustes Loading- und Error-Handling pro Route kostenlos — Suspense-basierte Loading-UI, die Streaming ermöglicht, und segment-scoped Error Boundaries mit Retry-Funktion.
Statt isLoading/error-State durch Komponenten zu leiten, wirfst du einfach eine loading.tsx und error.tsx hin, und Next.js kümmert sich um die Verbindung, was eine belastbare und responsive UX erzeugt.