Загрузка, ошибки и группы маршрутов

Бесплатные состояния «загрузка» и «ошибка» для сегмента плюс приём организации папок без лишних URL.

Специальные файлы loading.tsx и error.tsx автоматически оборачивают страницу сегмента в Suspense и error boundary, а группа маршрутов (name) группирует папки, не добавляя сегмент в URL.

loading.tsx — состояние загрузки

Если рядом со страницей лежит loading.tsx, Next.js покажет его, пока серверный компонент готовит данные. Никакого ручного useState(isLoading):

// app/blog/loading.tsx
export default function Loading() {
  return <p>Загружаем статьи…</p>;
}

Под капотом это обёртка в <Suspense>: каркас и layout уже видны, а «дырка» со страницей показывает заглушку до готовности данных.

error.tsx — экран ошибки

Если при рендере сегмента случилось исключение, показывается error.tsx. Это клиентский компонент (нужен 'use client'), он получает ошибку и функцию повтора:

"use client";

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Что-то пошло не так</h2>
      <button onClick={reset}>Повторить</button>
    </div>
  );
}

Важно: ошибка в одном сегменте не роняет весь сайт — границы изолируют сбой, а остальные части остаются рабочими.

Группы маршрутов

Папка, имя которой в круглых скобках, — это группа. Она нужна для организации и общих layout, но не появляется в URL:

app/
├─ (marketing)/
│  ├─ layout.tsx
│  ├─ about/page.tsx     → /about   (не /marketing/about!)
│  └─ pricing/page.tsx   → /pricing
└─ (shop)/
   ├─ layout.tsx
   └─ products/page.tsx  → /products

Так можно дать разным разделам сайта разные layout, не уродуя адреса. Сравним поведение скобок:

Итог

• loading.tsx — автоматическая заглушка через Suspense, без ручного состояния.
• error.tsx — изолированный экран ошибки сегмента (клиентский, с reset).
• Группа (name) организует папки и layout, не меняя URL.