Tai specialūs failai App Router, kurie automatiškai teikia įkėlimo ir klaidos būsenas maršruto segmentui — Next.js juos sujungia su React Suspense ir Error Boundaries, todėl jums nereikia rašyti to šablono kodo.
() {
;
}
Next.js automatiškai apvija segmento page.tsx su <Suspense> riba, kurioje šis failas yra atsarginė parinktis. Kai asinchroninis Server Component laukia savo duomenų, naudotojas iš karto mato loading.tsx UI — tada tikrasis turinys transliuojamas. Jokio rankinio įkėlimo būsenos valdymo.
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>
);
}
Jei puslapis (arba jo duomenų šaltinis) išmeta klaidą, Next.js ją suima su šia Error Boundary ir atvaizduoja error.tsx vietoj viso programos stūpsčio. Funkcija reset() leidžia naudotojui bandyti iš naujo be pilno iš naujo įkėlimo. Klaidos yra apribotos segmentui — maketas ir likusi programa lieka nepažeista.
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
Šie failai suteikia jums patikimą įkėlimo ir klaidos valdymą kiekvienam maršrutui nemokamai — Suspense pagrįstą įkėlimo UI, kuris įgalina transliavimą, ir segmento ribos klaidos ribas su bandymu iš naujo.
Vietoj isLoading/error būsenos perdavimo per komponentus, jūs pateikiate loading.tsx ir error.tsx, o Next.js tvarkosi laidais, sukurdamas atsparią ir atsakingą vartotojo patirtį.