Estes são arquivos especiais no App Router que fornecem automaticamente estados de carregamento e erro para um segmento de rota — Next.js os conecta com React Suspense e Error Boundaries para que você não precise escrever esse boilerplate.
() {
;
}
Next.js envolve automaticamente o page.tsx do segmento em um limite <Suspense> com este como fallback. Então, enquanto um Server Component assíncrono aguarda seus dados, o usuário vê imediatamente a interface loading.tsx — depois o conteúdo real é transmitido. Sem gerenciamento manual de estado de carregamento.
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>
);
}
Se a página (ou sua busca de dados) lançar um erro, Next.js o captura com este Error Boundary e renderiza error.tsx em vez de travar toda a aplicação. A função reset() permite que o usuário tente novamente sem um recarregamento completo. Os erros estão contidos ao segmento — o layout e o resto do app permanecem intactos.
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
Estes arquivos fornecem a você tratamento robusto de carregamento e erro por rota gratuitamente — interface de carregamento baseada em Suspense que permite streaming e limites de erro com escopo de segmento com retry.
Em vez de passar o estado isLoading/error através de componentes, você coloca um loading.tsx e error.tsx e Next.js cuida da fiação, produzindo uma UX resiliente e responsiva.