Next.js

Быстрый переход к обучению

1. Next.js — учебный модуль
2. Все учебные модули

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

1. App Router и маршрутизация в Next.js.
2. Server Components, Client Components, границы между ними.
3. SSR/SSG/ISR и revalidation.
4. Data fetching, caching, route handlers.
5. Оптимизация: image, fonts, code splitting, edge/runtime ограничения.

Что уметь объяснить на собеседовании

1. Как выбирать стратегию рендера на уровне маршрута.
2. Почему Server Components уменьшают JS в браузере.
3. Как устроен caching в Next и где типичные ошибки.
4. Как избежать hydration mismatch.

Грейд-фокус

1. Junior: базовая маршрутизация и data fetching.
2. Middle: грамотное разделение server/client логики.
3. Senior: архитектура Next-продукта под масштаб и SEO/perf цели.

Глубокие кейсы собеседования

1. Страница SEO-важная, но интерактивная и персонализированная.
2. Кэш приводит к устаревшему контенту после релиза.
3. Hydration mismatch из-за client-only API на серверном рендере.

Практический минимум

1. Собрать страницу с SSR и отдельный экран с SSG/ISR.
2. Реализовать route handler с валидацией ответа.
3. Настроить revalidation и проверить обновление данных.

Типовые ловушки

1. Смешивать server/client код без явных границ.
2. Игнорировать кэш-стратегию при работе с динамическими данными.
3. Пытаться рендерить browser API на сервере.

Self-review перед собеседованием

1. Я могу объяснить рендер-стратегию для трех разных страниц.
2. Я понимаю, где выгодны Server Components.
3. Я умею описать caching и invalidation в Next.

Связанные материалы

1. React
2. Рендеринг веб-страницы
3. Tooling и Delivery
4. Frontend System Design