Вопрос с собеседования · Frontend

Как устроен App Router в Next.js — маршруты, раскладки, загрузка данных?

MiddleReact
Ещё спрашивают так:
  • Что такое layout.tsx и page.tsx?
Коротко

Маршруты — папки в app/: app/orders/[id]/page.tsx → /orders/123. layout.tsx оборачивает вложенные страницы и не перемонтируется при переходах между ними; loading.tsx — Suspense-заглушка, error.tsx — граница ошибок, not-found.tsx — 404. Компоненты по умолчанию серверные: данные загружают прямо в компоненте через async/await (fetch, запрос к базе), без useEffect. Метаданные страницы — export metadata или generateMetadata.

  • Динамические параметры — params в props страницы
  • Группы (folder) и параллельные маршруты для сложных раскладок
  • Route handlers (route.ts) — свои API-эндпоинты

А ещё Клиентские компоненты нужны только там, где интерактивность

Подробно

// app/orders/[id]/page.tsx
export default async function OrderPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const order = await db.order.find(id);
  if (!order) notFound();
  return <OrderView order={order} />;
}

Что хотят услышать

  • Маршруты из файлов, page и layout.
  • loading, error, not-found.
  • Серверная загрузка данных async/await.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Маршруты — папки с page.tsx, layout оборачивает вложенные, данные — в серверных компонентах
  • ✗Маршруты описывают массивом в конфигурации, а layout.tsx перемонтируется при каждом переходе
  • ✗layout.tsx перемонтируется при каждом переходе
  • ✗Данные в App Router загружают только в useEffect

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

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

Разбор собеседования