Vercel випустила Next.js 16.3, перевівши Turbopack та Partial Prerendering із експериментальної зони у статус готових до продакшену рішень. Оновлення обіцяє пришвидшення збірок у два-п'ять разів для застосунків середнього розміру та скорочення часу до інтерактивності (Time to Interactive) на 40–60 % — приріст, який помітить будь-яка команда, що змагається за швидкість випуску функцій.

Чому це важливо саме зараз

Next.js тривалий час покладався на Webpack — JavaScript-бандлер, написаний на JavaScript, — як для розробки, так і для продакшен-збірок. Протягом останнього року команда Vercel вдосконалювала Turbopack — заміну на базі Rust, яка зменшує використання пам'яті та пришвидшує збірки. Водночас вони тестували Partial Prerendering (PPR) як спосіб поєднання статичного HTML із динамічним контентом «на льоту», але розробникам доводилося сприймати це як «експериментальну функцію, що потребує ручного ввімкнення». Переводячи обидва інструменти у стабільний статус, Vercel надає продакшен-командам готове рішення для підвищення продуктивності без звичного методу спроб і помилок.

Turbopack стає стабільним

  • Швидкість: Продакшен-збірки для репозиторіїв середнього розміру тепер працюють у два-п'ять разів швидше.
  • Пам'ять: Він знижує навантаження на пам'ять у великих кодових базах.
  • Активація: Додайте turbo: true у next.config.js, і все готово.

Ціною цього є суворіші вимоги до середовища. Turbopack потребує Node 18.17 або новішої версії, а будь-які кастомні плагіни Webpack, на які покладаються проєкти, не працюватимуть у Turbopack. Командам із розгалуженими конвеєрами плагінів потрібно провести аудит або переписати ці розширення перед переходом.

Server Actions стають зручнішими

Server Actions — функції, які виконуються на сервері, але викликаються з клієнта — тепер отримали тіснішу інтеграцію з TypeScript. Компілятор автоматично виводить типи, тому розробникам більше не потрібно писати анотації типів вручну. Він також розуміє вкладені об'єкти та схеми Zod від початку до кінця, зменшуючи невідповідності під час виконання. Нові конвенції файлової системи роблять розділення (resolution) екшенів явним, допомагаючи розробникам уникати прихованих багів, спричинених неоднозначними імпортами.

Partial Prerendering (PPR) готовий до продакшену

PPR дозволяє одній сторінці віддавати статичний HTML для частин, які ніколи не змінюються, одночасно окремо гідратуючи динамічні секції. Статична розмітка відображається миттєво, після чого фонове завантаження «оживляє» інтерактивні елементи. Цей підхід покращує показник Time to Interactive (TTI) на 40–60 %.

Впровадження PPR є простим: позначте статичні частини за допомогою існуючого API статичної генерації, а динамічні елементи дозвольте рендерити на стороні клієнта. Оскільки статичний HTML надходить як повний документ, браузер може почати рендеринг ще до запуску будь-якого JavaScript, що підвищує сприйняття продуктивності в повільних мережах.

Інші помітні покращення

  • Оптимізація зображень: тепер для зображень LCP (Largest Contentful Paint) можна встановлювати fetchPriority, гарантуючи, що браузер спочатку завантажить головне (hero) зображення.
  • Робота зі шрифтами: next/font автоматично створює підмножини символів (subsets), зменшуючи розмір корисного навантаження без додаткової конфігурації.
  • Middleware: Двигун зіставлення (matching engine) було переписано на Rust, що забезпечує швидшу перевірку маршрутів. Middleware також може повертати повні HTML-відповіді, відкриваючи можливості для сторінок, що рендериться на edge-серверах.

Першочергові кроки для команд

  1. Увімкніть Turbopack під час розробки; у продакшені він працюватиме так само, щойно буде встановлено прапорець turbo.
  2. Оновіть Node до версії 20 або вище.
  3. Перегляньте Server Actions, щоб скористатися перевагами виведення типів; видаліть будь-які ручні анотації, які тепер є зайвими.
  4. Протестуйте Partial Prerendering на одному маршруті з високим трафіком, щоб виміряти покращення TTI перед розгортанням на всьому сайті.

Застереження та нюанси

Приріст продуктивності залежить від відповідності новим вимогам середовища виконання. Проєкти, що застрягли на старих версіях Node або використовують багато кастомних плагінів Webpack, зіткнуться з труднощами.

Підсумок: Next.js 16.3 надає розробникам професійний бандлер на базі Rust та перевірений метод поєднання статичного й динамічного контенту. Впроваджуйте нові налаштування за замовчуванням вже зараз, усувайте проблеми із сумісністю, і ви побачите, що збірки завершуються швидше, а сторінки стають помітно швидшими для кінцевих користувачів.