To specjalne pliki w App Router, które automatycznie zapewniają stany ładowania i błędów dla segmentu trasy — Next.js łączy je z React Suspense i Error Boundaries, dzięki czemu nie musisz pisać tego szablonowego kodu.
() {
;
}
Next.js automatycznie obejmuje page.tsx segmentu granicą <Suspense> z tym jako fallback. Więc kiedy asynchroniczny Server Component czeka na swoje dane, użytkownik natychmiast widzi interfejs loading.tsx — a następnie rzeczywista zawartość jest przesyłana strumieniowo. Bez ręcznego zarządzania stanem ładowania.
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>
);
}
Jeśli strona (lub jej pobieranie danych) wyrzuci błąd, Next.js łapie go za pomocą tej Error Boundary i renderuje error.tsx zamiast crashować całą aplikację. Funkcja reset() pozwala użytkownikowi spróbować ponownie bez pełnego przeładowania. Błędy są ograniczone do segmentu — układ i reszta aplikacji pozostają nienaruszone.
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
Te pliki dają ci solidne obsługiwanie ładowania i błędów na trasę za darmo — interfejs ładowania oparty na Suspense, który umożliwia przesyłanie strumieniowe, oraz granice błędów o zakresie segmentu z ponowną próbą.
Zamiast przeszytych stanów isLoading/error poprzez komponenty, wrzucasz loading.tsx i error.tsx, a Next.js obsługuje okablowanie, tworząc odporne i responsywne doświadczenie użytkownika.