Web/journal
Next.js 16 и React 19
Next.js 16 и React 19: к чему готовить продуктовую команду в 2026
← ЖурналWeb7 мин чтения

Next.js 16 и React 19: к чему готовить продуктовую команду в 2026

Команда nordiqdev
студия

Next.js 16 уже не «новый», но в продакшне его аккуратно катают, а не запрыгивают. Мы перевели четыре проекта - два на чистый Next 16 + React 19, два гибридом - и собрали список того, что стоит обсудить с командой перед миграцией. Не маркетинг, а конкретные грабли.

Главное, что поменялось по факту

  • Cache Components заменили большую часть ручной работы с fetch-кэшем - модель стала предсказуемее, но требует переписать половину утилит.
  • Server Functions окончательно вытеснили Server Actions из документации и API; старый импорт работает, но deprecation-варнинг включён по умолчанию.
  • Turbopack теперь дефолт и для prod-сборки, не только для dev. Webpack-конфиги нужно мигрировать или удалять.
  • React Compiler v1 включён по умолчанию в новых проектах. Для существующих - opt-in, но эффект на bundle ощутимый.
  • Middleware переехал в Node.js runtime; edge-варианты остались как отдельный флаг.

Что ломается чаще всего

Самая частая регрессия - кэширование. В Next 13–15 многие команды накопили обходные пути с unstable_cache, revalidateTag и ручными ключами. В Next 16 модель Cache Components другая: вы декларируете кэшируемость на уровне компонента и используете use cache. Если просто переименовать вызовы - половина данных начинает кэшироваться вечно или не кэшироваться вообще.

Второй частый кейс - несовместимые сторонние библиотеки. Часть React-библиотек 2022–2023 годов опирается на старое поведение useId и контекста; в React 19 они тихо ломают гидрацию. Перед миграцией прогоните полный e2e и проверьте hydration warnings - они теперь ошибка, а не warn.

Compiler v1: что реально даёт

На двух наших проектах после включения React Compiler bundle уменьшился на 9% и 14%, а число useMemo/useCallback в коде команда сократила примерно на 60%. Это разовая чистка, но она даёт более читаемый код. Главное - не пытайтесь вручную «помогать» компилятору; он сам решит, что мемоизировать.

Порядок миграции, который у нас сработал

  1. Зафиксируйте baseline: bundle size, LCP, время сборки, размер cache hit ratio.
  2. Обновите все зависимости React/Next до последних минорных версий 15.x.
  3. Прогоните codemod next-codemod cache-components и руками пройдите оставшиеся unstable_cache.
  4. Включите Compiler сначала на одном изолированном маршруте, через неделю - на разделе.
  5. Снесите webpack.config, мигрируйте кастомные лоадеры на Turbopack-плагины.
  6. Проведите hydration-аудит: hydration warnings в Next 16 не падают тихо.
  7. Сравните baseline-метрики через две недели. Если ухудшилось - у вас Cache Components сломаны.

Что пока не трогаем

Server Functions для платежей и операций с побочными эффектами держим, но не превращаем в основной API-слой. У нас остаётся отдельный backend, и Server Functions - это удобный способ вызвать его из RSC, а не замена. Тимлидам, которые хотят «всё переписать на Server Functions», советуем притормозить хотя бы на квартал - там ещё догоняется observability и rate-limiting.

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

Теги
#next.js#react 19#server functions#миграция#web
Студия nordiqdev

Делаем мобильные приложения, веб-сервисы и AI на заказ

Если задача из текста выглядит знакомой и нужна команда, которая соберёт продукт - расскажите подробнее. Вернёмся в течение 24 часов с разбором.