Этап 11 из 12 · ≈ 12 ч

Next.js

Основа с Middle

Мета-фреймворк на React — маршрутизация по файлам, SSR и SSG, серверные компоненты.

Next.js добавляет к React то, чего в нём нет: маршрутизацию по структуре файлов, серверный рендеринг и статическую генерацию, загрузку данных на сервере, оптимизацию картинок и шрифтов, API-обработчики.

app/
  layout.tsx           общий каркас
  page.tsx             /
  orders/
    page.tsx           /orders
    [id]/page.tsx      /orders/42

Что важно знать

  • App Router: компоненты по умолчанию серверные; "use client" — граница клиентского кода.
  • Данные загружаются прямо в серверных компонентах (await fetch, запрос в БД), без отдельного API.
  • Стратегии: статическая страница, динамическая на каждый запрос, пересборка по времени или по событию.
  • Server Actions — функции на сервере, вызываемые из форм.
  • Кэширование в Next.js многоуровневое — частый источник «почему данные не обновились».
  • Альтернатива — React Router в режиме фреймворка (бывший Remix).

Темы этапа

Критерии освоения

Middle ≈ 12 ч

  • Строит приложение на App Router — маршруты по файлам, раскладки, загрузка данных на сервере
  • Использует Server Actions для форм

Практика. Сделать на Next.js блог или каталог с серверными компонентами, формой на Server Actions и метаданными для SEO.

Senior ≈ 6 ч

  • Проектирует кэширование и стратегии рендеринга страниц Next.js

Практика. Разобрать и описать поведение кэша Next.js в своём приложении и настроить инвалидацию по событию.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

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

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

Полный разбор
Как спроектировать кэширование и стратегии рендеринга страниц в Next.js?Senior

Стратегии: статическая генерация при сборке — для неизменного контента; ISR (revalidate по времени) — статика, которая пересобирается в фоне; ревалидация по требованию (revalidateTag, revalidatePath после изменения данных) — свежесть без постоянного SSR…

Полный разбор
Чем серверные компоненты отличаются от клиентских и от SSR?Middle

Серверный компонент выполняется только на сервере: может читать базу и секреты, его код не попадает в бандл браузера, но в нём нет состояния, эффектов и обработчиков событий. Клиентский (файл с "use client") — обычный интерактивный компонент; директива ставит…

Полный разбор
Что такое Server Actions и как с ними делать формы?Middle

Server Action — асинхронная функция с директивой "use server", которая выполняется на сервере, но вызывается из клиента: её передают в <form action={createOrder}> или вызывают из обработчика. Фреймворк сам делает POST-запрос. Форма работает даже без…

Полный разбор
Чем отличаются CSR, SSR, SSG и ISR?Middle

CSR — сервер отдаёт пустую страницу и JS, всё рисует браузер: просто, но медленный первый показ и слабое SEO; подходит для личных кабинетов. SSR — HTML собирается на сервере на каждый запрос: быстрый первый показ и SEO, свежие данные, но нужен сервер и время…

Полный разбор

Документация

← Вся карта «React»

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

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

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

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