Nämä ovat erikoistiedostot App Routerissa, jotka tarjoavat automaattisesti lataamisen ja virheen tilat reitinjaksolle — Next.js yhdistää ne React Suspenseen ja Error Boundariesiin, jotta sinun ei tarvitse kirjoittaa tuota mallinnuskoodia.
() {
;
}
Next.js käärii automaattisesti jaksoon kuuluvan page.tsx:n <Suspense>-rajalle, jossa tämä on fallback. Joten kun asynkroninen Server Component odottaa tietojaan, käyttäjä näkee välittömästi loading.tsx-liittymän — sitten todellinen sisältö virtaa sisään. Ei manuaalista latauksen tilan hallintaa.
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>
);
}
Jos sivu (tai sen tiedonhaku) heittää virheen, Next.js ottaa sen kiinni tällä Error Boundarylla ja renderöi error.tsx:n sen sijaan että koko sovellus kaatuisi. reset()-funktio sallii käyttäjälle uudelleenyrityksen ilman täyttä uudelleenlatausta. Virheet ovat rajoitettu jaksolle — asettelu ja sovelluksen loput pysyvät ehjinä.
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
Nämä tiedostot antavat sinulle kestävän latauksen ja virheen käsittelyn reittiä kohti ilmaiseksi — Suspenseen perustuva latausliittymä, joka mahdollistaa suoratoiston, ja jakson rajatut virherajat uudelleenyrityksen kanssa.
Sen sijaan että välittäisit isLoading/error-tilaa komponenttien läpi, voit yksinkertaisesti pudottaa loading.tsx:n ja error.tsx:n, ja Next.js hoitaa kytkennän, mikä tuottaa joustavan ja reagoivan käyttöliittymän.