Велике оновлення Next.js 12

Версія 12 була описана Vercel як найкраща версія Next.js в історії та була випущена 26 жовтня. Версія компілятора Rust заснована на технології компілятора JavaScript / TypeScript від swc і використовує власну компіляцію. Розробники Next.js спростили групування та компіляцію, при цьому локальні оновлення приблизно в три рази швидше для компіляції та приблизно в п’ять разів швидше для робочих збірок.

Компілятор версії 12 також пришвидшує великі бази коду, і розробники покращили спостережливість продуктивності компілятора. Основні вдосконалення пакета модулів Webpack оптимізують швидке оновлення та роблять записи на вимогу більш надійними.

Розробники можуть оновити Next.js 12, виконавши: npm i next@latest

Основні покращення в Next.js 12:

• Підтримуються модулі ES, завдяки чому JavaScript пропонує офіційну стандартизовану систему модулів. Пакунки меншого розміру та пакети JavaScript увімкнено для кращого користування. У Next.js 11 експериментальна підтримка модулів ES мала пріоритет над модулями CommonJS. Версія 12 робить його стандартним. Існує також експериментальна підтримка імпорту модулів ES через URL-адреси.
• Впровадження функцій проміжного програмного забезпечення дозволяє розробникам використовувати код за допомогою конфігурації. Розробники можуть запускати код до завершення запиту. Проміжне програмне забезпечення можна використовувати для всього, що має спільну логіку для кількох сторінок, включаючи автентифікацію, захист від ботів, перенаправлення та перезаписи, аналіз на стороні сервера та інші функції.
• Завдяки підтримці React 18, такі функції, як Suspense, автоматична пакетна обробка оновлень і API startTransition підтримуються під експериментальним прапором, як і новий потоковий API для серверного рендеринга з підтримкою React.lazy.
• Компоненти сервера React, які тепер підтримуються в альфа-версії, дозволяють відображати на сервері будь-що, включаючи самі компоненти. З компонентами сервера немає потреби в клієнтському JavaScript, який прискорює відтворення сторінок і покращує зручність використання програм.
• Вбудований API оптимізації зображень тепер підтримує зображення AVIF, що дозволяє отримати на 20% менші зображення порівняно з WebP. Ця функція зараз в статусі активації.
• Веб-сканери або пошукові боти також автоматично відображають сторінки ISR (інкрементальна статична регенерація) ’fallback: true’.
• Відстежуючи вихідний файл, Next.js автоматично відстежує, які файли потрібні кожній сторінці та маршруту API.
• Fast Refresh тепер використовує з’єднання WebSocket замість з’єднання EventSource.