Next.js 16 делает сборку быстрее и кэширование предсказуемым. Релиз приносит Cache Components, Turbopack по умолчанию, обновлённый роутинг и MCP DevTools а также многое другое.

TL;DR

  • Cache Components и явная модель кэширования на базе PPR.
  • Turbopack вышел из беты и стал дефолтным для новых проектов.
  • Улучшены префетч и маршрутизация, логирование стало прозрачнее.
  • Next.js DevTools с поддержкой Model Context Protocol (MCP).
  • Переименование middleware.ts в proxy.ts и уточнение назначения.
  • Поддержка React Compiler, апдейты API кэширования.

Фокус на базовых вещах: скорость, предсказуемость, наблюдаемость

Вместо радикальных перестроек платформа делает шаг к стабильности: ускоряет сборку и обновления, упрощает кэширование, оптимизирует маршрутизацию и даёт разработчикам больше прозрачности через улучшенные логи и DevTools. Для команд это означает меньше «магии» и больше контроля над тем, как ведёт себя приложение в продакшене.

Cache Components: явное кэширование на базе PPR

Кэширование в Next.js долго оставалось источником неожиданностей. Next.js 16 исправляет это с помощью Cache Components — явной модели, где разработчик решает, что и на сколько кэшировать, а также когда и как проводить ревалидацию. Механизм опирается на Partial Pre-rendering, объединяя преимущества статической и динамической генерации. Итог — понятное поведение без загадок, когда данные кэшируются и обновляются по прозрачным правилам.

Вместе с этим упорядочены и API: обновлённый revalidateTag() позволяет точнее настраивать политику «жизни» кэша, новый updateTag() добавляет поведение «read-your-writes» для немедленной видимости изменений пользователем, а удобный refresh() помогает освежать некэшируемые фрагменты — например, счётчики, уведомления или ленты активности.

Next.js DevTools с MCP: подготовка к умным помощникам

Одна из самых дальновидных новинок — интеграция Next.js DevTools с Model Context Protocol. MCP делает контекст приложения доступным для инструментов и ИИ-агентов: маршруты, слои, кэширование, схема рендеринга. Такая «осознанность» открывает путь к подсказкам, которые не просто показывают стектрейс, а понимают, как устроено ваше приложение, и предлагают адресные рекомендации. Технология ещё молодая, но направление очевидно: инструменты будут не только реагировать на ошибки, но и объяснять их причины.

proxy.ts вместо middleware.ts

Семантическая, но показательная правка: middleware.ts переименован в proxy.ts. Цель — снять путаницу вокруг ожиданий от «middleware». Логика здесь должна быть максимально лёгкой и быстрой (например, редиректы по cookie авторизации). Любые сетевые вызовы на критическом пути могут задержать первый рендер всей страницы, поэтому название «proxy» лучше отражает рекомендованный сценарий использования.

Логи, которые помогают

Логирование стало предметнее: сборка и dev-сервер теперь явно раскладывают время по этапам — компиляция, рендеринг, оптимизация. Если проект «внезапно стал собираться дольше», проще увидеть, где «узкое место», и принять решение: оптимизировать кодогенерацию, поправить конфигурацию или пересмотреть стратегию кэширования.

Turbopack по умолчанию: скорость и кэш файловой системы

Turbopack вышел из беты и становится стандартным бандлером для новых проектов. На практике это даёт 2–5× ускорение сборок и до 10× — для Fast Refresh. Для больших репозиториев особенно заметен файловый кэш (пока в бете), который переиспользует артефакты сборки между сессиями и уменьшает время холодного старта. Главная ценность не в «синтетических бенчмарках», а в том, как быстро вы возвращаетесь к потоку работы при ежедневной итерации.

Build Adapters: гибкость для нестандартных сред

Если вы деплоили Next.js в окружении, отличном от привычного хостинга, вас обрадуют Build Adapters (альфа). Они позволяют подключаться к процессу сборки без форка фреймворка, адаптируя пайплайн под свои инфраструктурные требования. Это шаг к по-настоящему переносимой сборке для компаний с кастомными CI/CD и self‑hosting.

React Compiler: меньше ручного мемоизирования

Next.js 16 включает стабильную поддержку React Compiler, который автоматически мемоизирует компоненты и снижает количество лишних перерисовок. В большинстве случаев необходимость расставлять useMemo/useCallback вручную отпадает. Да, компиляция отнимает чуть больше времени (используется Babel‑трасформация), но на UI‑насыщенных экранах выигрыш в производительности рендера окупает этот компромисс.

Маршрутизация и префетч: меньше дублей, больше экономии

Под капотом серьёзно улучшён префетч: общие Layout‑ы загружаются один раз даже при префетче множества ссылок (дедупликация), а инкрементальный префетч подтягивает только недостающие части вместо целых страниц. Когда ссылка выходит из вьюпорта, лишние запросы отменяются. Никаких изменений в коде приложения не требуется — интерфейс просто становится отзывчивее.

Современные зависимости и очистка устаревшего

Платформа обновлена до актуальной версии React 19.x, что приносит в экосистему новые возможности, включая useEffectEvent и нативные View Transitions для более плавной навигации. Требования по окружению тоже подтянуты: нужен Node.js 20.9+ и TypeScript 5.1+; из ядра убраны устаревшие возможности вроде AMP и встроенной команды next lint. Фреймворк становится компактнее и проще в сопровождении.

Как аккуратно перейти на Next.js 16

  • Обновите зависимости: Next.js, React до 19.x, Node.js до 20.9+ и TypeScript до 5.1+.
  • Включите Turbopack по умолчанию для новых воркспейсов; для больших репозиториев попробуйте файловый кэш.
  • Переименуйте middleware.ts в proxy.ts и убедитесь, что логика остаётся «лёгкой».
  • Пересмотрите политику кэширования: используйте Cache Components, обновлённые revalidateTag(), updateTag() и refresh() для «прозрачных» сценариев.
  • Оцените React Compiler на UI‑насыщенных участках: следите за профилировщиком рендера и метриками LCP/INP.
  • Проверьте префетч и роутинг в проде: поведение станет быстрее без изменений кода, но мониторинг подтвердит выигрыш.
  • Задействуйте DevTools MCP, если используете ИИ‑ассистентов: контекст приложения станет им доступнее, а подсказки — полезнее.

Итог

Next.js 16 — это релиз о том, как ваш билд «чувствуется»: кэширование стало предсказуемым, сборка и обновления быстрее, маршрутизация — экономичнее, а диагностика — понятнее. Можно внедрять прямо сейчас — от экспериментов с Cache Components и Turbopack до продакшн‑нагрузки.

Source: https://nextjs.org/blog/next-16

Фото аватара

Анатолий Юмашев

Руководитель группы разработки в домене eCommerce, B2C & B2B.

Изучаю современные веб технологии, платформы и инструменты для eCommerce & CMS.

Также интересуюсь Agile и различными практиками повышения продуктивности: Kanban, Scrum, S3 ...

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *