Jak fungují `loading.tsx` a `error.tsx`?

Question

Accepted Answer

Jsou to **speciální soubory** v App Router, které automaticky poskytují stavy načítání a chyb pro segment trasy — Next.js je propojuje s React Suspense a Error Boundaries, takže nemusíte psát tento boilerplate kód. ## loading.tsx — okamžité UI načítání prostřednictvím Suspense ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // shown while the page's data is being fetched } ``` Next.js automaticky obalí `page.tsx` segmentu v hranici `` s tímto jako fallback. Takže zatímco asynchronní Server Component čeká na svá data, uživatel okamžitě vidí UI `loading.tsx` — pak se skutečný obsah streamuje dovnitř. Žádná ruční správa stavu načítání. ```text User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it ``` ## error.tsx — error boundary pro segment ```tsx "use client"; // error components MUST be Client Components export default function Error({ error, reset, }: { error: Error; reset: () => void; // retry: re-renders the segment }) { return (

Something went wrong: {error.message}

); } ``` Pokud stránka (nebo její načítání dat) vyvolá chybu, Next.js ji zachytí touto Error Boundary a vykreslí `error.tsx` **místo pádu celé aplikace**. Funkce `reset()` umožňuje uživateli opakovat pokus bez úplného opětovného načtení. Chyby jsou **omezeny** na segment — layout a zbytek aplikace zůstávají netknuty. ## Související speciální soubory ```text 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 ``` ## Proč to má smysl Tyto soubory vám poskytují robustní zpracování načítání a chyb na trasu **zdarma** — Suspense-based UI pro načítání, které umožňuje streamování, a error boundaries vymezené segmentem s opakováním. Místo předávání stavu `isLoading`/`error` přes komponenty stačí zahrnout `loading.tsx` a `error.tsx` a Next.js se postará o propojení, čímž vznikne odolná a responzivní uživatelská rozhraní.