Αυτά είναι ειδικά αρχεία στο App Router που παρέχουν αυτόματα καταστάσεις φόρτωσης και σφάλματος για ένα τμήμα διαδρομής — το Next.js τα συνδέει με React Suspense και Error Boundaries ώστε να μην χρειάζεται να γράψεις αυτό το boilerplate κώδικα.
() {
;
}
Το Next.js τυλίγει αυτόματα το page.tsx του τμήματος σε ένα όριο <Suspense> με αυτό ως fallback. Έτσι ενώ ένα ασύγχρονο Server Component περιμένει τα δεδομένα του, ο χρήστης βλέπει αμέσως το UI του loading.tsx — και μετά το πραγματικό περιεχόμενο ρέει. Καμία χειручειριστή διαχείριση κατάστασης φόρτωσης.
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>
);
}
Αν η σελίδα (ή η ανάκληση δεδομένων της) ρίξει σφάλμα, το Next.js το πιάνει με αυτό το Error Boundary και κάνει render το error.tsx αντί να καταρρεύσει ολόκληρη η εφαρμογή. Η συνάρτηση reset() επιτρέπει στον χρήστη να ξαναδοκιμάσει χωρίς πλήρη ανανέωση. Τα σφάλματα περιορίζονται στο τμήμα — το layout και το υπόλοιπο της εφαρμογής παραμένουν ανέπαφα.
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
Αυτά τα αρχεία σου δίνουν ισχυρή φόρτωση και διαχείριση σφαλμάτων ανά διαδρομή δωρεάν — UI φόρτωσης βασισμένο σε Suspense που ενεργοποιεί streaming, και error boundaries με εύρος τμήματος με retry.
Αντί να περνάς κατάσταση isLoading/error μέσα από συστατικά, ρίχνεις ένα loading.tsx και ένα error.tsx και το Next.js χειρίζεται τη σύνδεση, παράγοντας ένα ανθεκτικό, ανταποκρινόμενο UX.