Next.js в вакансиях 2026-го часто выглядит как обязательная галочка рядом с React. Из-за этого roadmap ломается в две стороны: человек учит «деплой на Vercel» вместо JavaScript или, наоборот, годами сидит в курсах по хукам и так и не собирает кабинет. Next не заменяет язык и не заменяет React. Это рамка: маршруты, сервер и клиент, данные, сборка. Без базы она даёт красительный URL и пустой профиль.

Ниже — когда Next вообще стоит включать, какой учебный кабинет закрывает junior-сомнение, чем App Router отличается от «я сделал npx create-next-app», и как не откликаться на Senior Fullstack с графиком junior. Цель — работа, не коллекция стартеров.

Коротко:

  • Сначала HTML/CSS/JS и React. Next — следующий слой, не первый.
  • Работодателю нужен кабинет: список, фильтры, форма, состояния загрузки и ошибки, а не лендинг «Hello».
  • «Умею деплоить на Vercel» само по себе не навык. Навык — понять, где код выполняется и откуда берутся данные.
  • Один репозиторий с README «что сделано / что нет» сильнее пяти шаблонов из YouTube.
  • Готовность к поиску — когда вы объясняете маршрут, fetch и почему кнопка не должна ходить в базу с клиента.

Next — не вместо JavaScript

Если плохо с DOM, промисами, модулями и базовым CSS, Next только спрячет дыры за папками app. Вакансия «frontend, React, Next» всё равно проверяет язык: события, состояние, списки, ключи, контролируемые поля. Каркас языка и React лучше собирать по React roadmap и пути во frontend. TypeScript на входе уже норма: смотрите TypeScript roadmap, но не блокируйте проект месяцем «сначала весь Handbook».

Next имеет смысл, когда вы уже собираете интерфейс на React и вам нужны маршруты, шаринг вёрстки, серверный рендер или удобный деплой. Если все junior-вакансии вокруг — чистый React + Vite, не тащите Next в резюме ради моды. Смотрите формулировки в frontend-вакансиях, не чужой infographic.

Что спрашивают на работе, а не в туториале

На первой frontend-роли с Next обычно ждут:

  1. Страницы и вложенные маршруты без магии «само получилось».
  2. Список из API: загрузка, пусто, ошибка, пагинация или хотя бы «ещё».
  3. Форму с валидацией, которая не теряет ввод.
  4. Понимание: этот компонент клиентский, потому что есть onClick, а данные можно отдать с сервера.
  5. Git: ветка, PR-описание, не «main с пятницей вечером».

Не ждут, что junior с нуля настроит монорепу, edge-функции по всем регионам и самописный CMS. Если вакансия требует «оптимизация Core Web Vitals, RSC, сложный кэш, 4 года Next» — это не ваш roadmap-этап.

Карта: четыре слоя

Слой 1. Браузер и React

Семантика, flex/grid, доступность кнопки и формы, fetch, JSON. React: компоненты, пропсы, состояние, эффекты без бесконечного цикла, списки. Без этого Next будет генератором папок.

Слой 2. Маршруты и вёрстка приложения

App Router: page, layout, динамический сегмент [id], loading/error как идея, не обязательно все файлы сразу. Ссылки через Link, не полная перезагрузка на каждый клик. Общий layout кабинета: шапка, навигация, контент.

Слой 3. Данные

Откуда список: публичный API, mock, свой route handler. Что такое серверный компонент в одном предложении: нет хуков браузера, можно сходить за данными ближе к серверу. Клиентский — интерактив. Не надо читать весь RFC. Надо не класть секрет API в клиентский бандл.

Слой 4. То, что добавляют вакансии

Auth-обходка (хотя бы mock-логин), Tailwind или CSS-модули как в команде, базовые тесты на форму, Docker только если просят. Деплой — один понятный URL, не пять доменов «для портфолио».

Какой кабинет собрать

Бриф: «кабинет заказов». Список с фильтром по статусу, карточка заказа, форма новой заявки, состояния загрузки и ошибки. Стек: Next, TypeScript, CSS-модули или Tailwind — один способ, не оба «на всякий случай». Данные: mock JSON или публичный API плюс свой слой маппинга. README на 15 строк: запуск, что сделано вами, чего нет (оплата, настоящая авторизация, тесты — если нет, так и напишите).

Почему не лендинг агентства и не клон Twitter: рекрутер за две минуты не поймёт вашу роль. Кабинет похож на работу: таблицы, формы, пустые состояния. Как описать это в CV — резюме frontend-разработчика и навыки frontend.

Пример 1. Что писать в README, чтобы открыли

Кабинет заказов на Next.js (App Router) + TypeScript.

Сделано: список, фильтр статуса, страница заказа, форма с проверкой полей, состояние ошибки сети, адаптив до узкой колонки.

Не сделано: настоящий логин, оплата, e2e. Авторизация — заглушка в localStorage, в коде помечена как mock.

Запуск: npm i && npm run dev. Точка входа для разбора на созвоне: components/OrderForm.tsx и app/orders/page.tsx.

Такой README снимает вопрос «это шаблон Vercel?». Если шаблон — напишите, что меняли вы. Скрытый стартер, который притворяется прод-системой, разваливается на вопросе «кто пользователи».

Пример 2. 60–90 дней, если React уже чуть-чуть есть

  1. Недели 1–3. Один кабинет на Vite+React без Next. Список и форма. Цель — не потерять JS.
  2. Недели 4–6. Перенести тот же кабинет на Next. Маршруты, layout, динамическая страница. Объяснить вслух, зачем 'use client' на форме.
  3. Недели 7–9. Типизация ответов API, пустые состояния, одна доступная форма (label, ошибка поля). Деплой одного URL.
  4. Недели 10–12. Под вакансии: либо простой login-mock, либо тесты на форму, либо кусок SSR-списка. Резюме и точечные отклики.

Если React ещё нет, не начинайте с Next. Вернитесь на слой 1. Иначе через месяц будет «умею create-next-app» и ноль понимания состояния.

Где путают «умею Next» и «умею Vercel»

Кнопка Deploy не объясняет, почему форма должна быть клиентской, а список заказов можно отдать с сервера. На интервью это слышно сразу: человек рассказывает про домен и превью-ветки и не может сказать, какой fetch где выполняется. Для портфолио один стабильный URL нужен. Для найма нужен рассказ:

  • Какая страница серверная, какая с 'use client' и почему.
  • Где лежит ключ API и почему его нет в браузерном бандле.
  • Что увидит пользователь, если API 500: не белый экран, а сообщение и повтор.
  • Как вы избежали лишнего JS на странице списка — хотя бы на уровне «тяжёлую форму вынес, таблицу оставил серверной».

Если деплой только через платформу, так и напишите в README. Не добавляйте в резюме Docker, nginx и CI, если максимум — git push. Команды, у которых Next на своём Kubernetes, это услышат и начнут копать инфраструктуру, которой у вас нет. Честный фронт junior сильнее выдуманного fullstack-DevOps.

Ещё одна ловушка — клон интернет-магазина с Stripe-кнопкой из курса. Рекрутер уже видел этот репозиторий. Либо сильно перепишите под свой бриф (другие сущности, свои состояния ошибки, свой README), либо соберите кабинет заказов/заявок, где видно ваши руки. Как не расползтись в «и бэк, и фронт, и оплата»: fullstack без распыления.

Как читать вакансию с Next

Типичная строка: «Frontend, React, Next.js, TypeScript, опыт коммерции от 1 года, плюс GraphQL».

  • React+TS — ядро. Нет коммерции — откликайтесь только если в описании есть intern/junior и тестовое, либо если проект реально закрывает задачи кабинета.
  • Next в одной строке со списком из пятнадцати фреймворков — часто «было бы неплохо». Смотрите, есть ли Next в обязанностях: маршруты, SSR, App Router.
  • GraphQL в плюсах — не повод учить месяц, если ядра нет.
  • «Умение деплоить» без слова Vercel может значить Docker/nginx у заказчика. Не пишите Vercel как единственный опыт инфраструктуры, если не готовы объяснить, что делали вы, а не кнопка.

Откликаюсь на frontend с React/Next.

Собрал кабинет заказов: список, фильтр, форма, обработка ошибок. TypeScript, App Router. Авторизация учебная, так и указано. Демо и репозиторий: [ссылки]. На созвоне могу разобрать форму и где проходит граница server/client.

Чего не делать

  • Не ставить в шапку Next, если вы только прогнали стартер.
  • Не коллекционировать UI-киты вместо одной формы.
  • Не путать SEO-лендинг с навыком продуктового frontend: разные вакансии.
  • Не копировать «fullstack Next + Prisma + Stripe» с курса и выдавать за коммерцию.
  • Не спорить на интервью, что «клиентские компоненты устарели». Спросите, какой роутер у команды, и говорите на их языке.

Перед рассылкой прогоните формулировки стека: что трогали, что видели в видео. Помогает как указать стек в резюме. Письмо — короткое, под роль: генератор сопроводительного только как черновик.

Чек-лист кабинета перед откликом

Откройте своё демо в инкогнито и пройдите как рекрутер за четыре минуты:

  1. Список открывается, фильтр меняет выдачу, пустой фильтр не ломает страницу.
  2. Карточка по прямому URL не 404 без объяснения.
  3. Форма: подписи полей, ошибка пустой отправки, кнопка не жмётся дважды вслепую.
  4. Сеть offline / кривой ответ — не молчаливый спиннер навсегда.
  5. README совпадает с тем, что на экране. Если авторизация mock — на экране не написано «безопасный банк».

Если пункт 1 уже врёт, чините продукт, не сопроводительное. Письмо не спасёт сломанный фильтр. Когда кабинет живой — тогда черновик письма и точечные отклики, не 200 штук в день.

Готовность к собеседованию

Вас скорее спросят не «чем Page Router отличался в 2023», а:

  • Почему этот компонент клиентский.
  • Куда положить токен и почему не в репозиторий.
  • Как бы вы подгрузили следующую страницу списка.
  • Что сломается, если API вернёт 500.

Тренируйте рассказ о проекте по минутам, не «открою GitHub и посмотрим». Разбор вопросов по фронту: вопросы на собеседовании frontend. Общий каркас самопрезентации — в рассказе о себе.

Частые вопросы

Нужен ли Next, если вакансии только про React?

Нет. Добавляйте Next, когда он есть в обязанностях или вы сознательно целитесь в такие команды. Лишний фреймворк в шапке без проекта выглядит как шум.

App Router или Pages?

Для нового учебного проекта — App Router, так проще совпасть с свежими вакансиями. Если тестовое на Pages — делайте Pages. Не устраивайте священную войну в письме.

Обязателен ли TypeScript?

На CIS frontend 2026 почти да. Можно начать форму на JS и перевести. Не откладывайте проект на «когда выучу все дженерики».

Считать ли деплой на Vercel опытом DevOps?

Нет. Это удобный хостинг фронта. Если в вакансии Docker и CI — покажите свой файл сборки или честно скажите, что деплоили через платформу.

Можно ли идти на fullstack с одним Next-кабинетом?

Слабо, если нет серверной части, которую вы понимаете. Лучше честный frontend junior, чем «fullstack» без базы и авторизации. Когда fullstack уместен — в материале про fullstack без распыления.

Сколько проектов нужно?

Один сильный кабинет лучше трёх лендингов. Второй проект — только если первый не стыкуется с целевой вакансией (например, нужен магазин, а у вас только дашборд).

Что сделать сейчас

Выпишите 10 frontend-вакансий и отметьте, где Next обязателен, а где плюс. Соберите или доведите один кабинет с README «сделано / не сделано». Затем резюме со ссылкой и 10–15 откликов на роли, где кабинет совпадает с задачами, а не с модным словом в заголовке.

Если файл уже есть, прогоните его через разбор резюме: на фронте чаще врут стеком и прячут учебный статус проекта. Для интервью держите одну ссылку и один рассказ на 8–10 минут, не весь GitHub.