Это специальные файлы в App Router, которые автоматически предоставляют состояния загрузки и ошибок для сегмента маршрута — Next.js интегрирует их с React Suspense и Error Boundaries, так что вам не нужно писать этот boilerplate.
() {
;
}
Next.js автоматически обёртывает page.tsx сегмента в границу <Suspense> с этим в качестве fallback. Таким образом, пока асинхронный Server Component ожидает своих данных, пользователь сразу видит интерфейс loading.tsx — а затем реальное содержимое потоком поступает. Без ручного управления состоянием загрузки.
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>
);
}
Если страница (или получение её данных) выбрасывает ошибку, Next.js перехватывает её этой Error Boundary и рендерит error.tsx вместо того, чтобы всё приложение упало. Функция reset() позволяет пользователю повторить попытку без полной перезагрузки. Ошибки ограничены сегментом — макет и остальное приложение остаются нетронутыми.
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
Эти файлы дают вам надёжную обработку загрузки и ошибок на каждый маршрут бесплатно — интерфейс загрузки на основе Suspense, который включает потоковую передачу, и границы ошибок с областью сегмента с возможностью повтора.
Вместо того чтобы передавать состояние isLoading/error через компоненты, вы помещаете loading.tsx и error.tsx, и Next.js обрабатывает соединения, создавая устойчивый, отзывчивый UX.