Ezek az App Router speciális fájljai, amelyek automatikusan betöltési és hibaállapotokat biztosítanak egy útvonalszegmenshez — a Next.js a React Suspense és az Error Boundaries segítségével kapcsolja össze őket, így nem kell megírnia ezt a boilerplate kódot.
() {
;
}
A Next.js automatikusan becsomagolja a szegmens page.tsx-ét egy <Suspense> határba ezzel fallback-ként. Tehát amíg egy aszinkron Server Component várakozik az adataira, a felhasználó azonnal látja a loading.tsx felhasználói felületet — majd a valódi tartalom streamelődik. Nincs manuális betöltési állapot kezelése.
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>
);
}
Ha az oldal (vagy adatlekérése) hibát dob, a Next.js elkülöníti ezt az Error Boundary-val és a error.tsx-t jeleníti meg ahelyett, hogy az egész alkalmazást összetörné. A reset() függvény lehetővé teszi a felhasználónak, hogy teljes újratöltés nélkül újra próbálkozzon. A hibák az adott szegmensre korlátozódnak — az elrendezés és az alkalmazás többi része sértetlen marad.
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
Ezek a fájlok ingyenes szegmensenkénti robusztus betöltési és hibakezelést nyújtanak — a streamelést lehetővé tevő Suspense-alapú betöltési felhasználói felület és szegmenshatárokú error boundaries újrapróbálási lehetőséggel.
Ahelyett, hogy az isLoading/error állapotot átadná az összetevőkön keresztül, helyezze el a loading.tsx-t és az error.tsx-t, és a Next.js gondoskodik az összekapcsolásról, létrehozva egy rugalmas, reszponzív felhasználói felületet.