Next.js 9.1.7

Next.js 9 был выпущен шесть (6) месяцев назад, за ним последовал Next.js 9.1 три (3) месяца назад.

Эти два релиза добавили в Next.js очень мощные новые функции, не увеличивая базовый размер клиентской части.

С тех пор мы сосредоточились на доработке и улучшении фреймворка в целом: 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.1.5, 9.1.6 и 9.1.7.

Давайте рассмотрим, что улучшили эти релизы!

• На 3-8% меньше клиентского JavaScript: Мы оптимизировали вывод приложений, сократив размер простых приложений на 7.5kB. Более сложные приложения могут получить экономию до 8% и более.
• Переработанный вывод CLI при production-сборке: Теперь вывод production-сборки показывает размеры gzipped-файлов в более понятном формате.
• Встроенные полифиллы: fetch(), URL и Object.assign: Приложения могут использовать API fetch(), URL и Object.assign в старых браузерах без проблем совместимости.
• Оптимизированная загрузка страниц: улучшенные FCP и TTI: Мы тесно сотрудничали с командой Google Chrome для максимального повышения производительности загрузки страниц.
• Поддержка новейших возможностей JavaScript: Мы гарантируем, что вы можете использовать последние возможности JavaScript, включая Опциональную цепочку (Optional Chaining), Нулевое слияние (Nullish Coalescing) и другие стабильные функции ES2020.
• Поддержка zero-конфигурации для приложений с next export: Приложения, использующие next export, теперь можно развернуть на Vercel без дополнительной конфигурации.
• Совместимость с React Strict Mode и возможность включения: Вся клиентская часть Next.js теперь совместима с React Strict Mode. Мы также добавили опцию конфигурации для включения этого режима.
• Автоматическое тестирование с nightly-сборками React: Next.js автоматически тестируется с каналом next React, что гарантирует совместимость с будущими релизами.

Все эти улучшения обратно совместимы и не требуют изменений. Для обновления просто выполните:

npm i next@latest react@latest react-dom@latest

На 3-8% меньше клиентского JavaScript

В сотрудничестве с командой Google Chrome все приложения Next.js получат выгоду от уменьшения размера на 7.5kB и более.

Простые приложения увидят уменьшение размера на 3-4%, а более сложные — до 6-8% (или больше)!

Частично это достигнуто за счёт замены клиентской версии пакета url на реализацию, основанную на URL API.

Дополнительное сокращение размера достигнуто за счёт встроенных небольших полифиллов для часто используемых пакетов. Подробнее о них можно прочитать здесь.

Наконец, мы оптимизировали вывод JSX, что даст экономию пропорционально количеству JSX в вашем приложении.

Переработанный вывод CLI при production-сборке

Вывод CLI при production-сборке был переработан для большей ясности. Поскольку Next.js — это гибридный фреймворк, каждая страница может иметь разные характеристики.

Новый вывод классифицирует каждую страницу как одну из следующих:

• Рендеринг на стороне сервера (Server): страница рендерится на сервере во время выполнения, то есть использует getInitialProps или getServerProps (предложение)
• Автоматически статически оптимизирована (Static): страница была отрендерена как статический HTML во время сборки и будет обслуживаться как статический файл (не использует начальные пропсы)
• Статически сгенерирована с использованием вычисленных данных (SSG): страница была сгенерирована как статический HTML/JSON во время сборки и будет обслуживаться как статические файлы (использует getStaticProps (предложение))

Кроме того, новый вывод показывает размер каждой страницы после Gzip — эти размеры исключают файлы, общие для всех страниц (они отображаются отдельно).

Размер каждой страницы будет окрашен в соответствии с предполагаемым пользовательским опытом:

• Менее 130kB: Зелёный — ваше приложение должно работать быстро в большинстве сетевых условий и на большинстве устройств.
• От 130kB до 170kB: Жёлтый — время загрузки вашего приложения приближается к 5-6 секундам на базовых глобальных условиях устройства и сети.
• Более 170kB: Красный — ваше приложение, вероятно, будет загружаться более 6 секунд в тех же условиях.

Новый вывод CLI Next.js при production-сборке

Мы будем рады услышать ваши отзывы о новом выводе сборки.

В ближайшем будущем Next.js также получит бюджет размера, который поможет вам контролировать размер страниц.

Встроенные полифиллы: fetch(), URL и Object.assign

Анализируя приложения пользователей и наши примеры, мы обнаружили, что большинство из них поставляются с похожим набором полифиллов. В некоторых случаях приложения даже содержали дублирующиеся полифиллы для одной и той же функции.

Чтобы исправить это, мы совместно с командой Google Chrome встроили полифиллы для трёх наиболее распространённых API.

Используя дифференциальную загрузку, эти полифиллы не загружаются для 83% веб-трафика глобально. Это означает, что большинство ваших пользователей не загрузит байты, связанные с этими полифиллами — они будут загружаться только при необходимости.

Кроме того, любые известные полифиллы, которые мы теперь встроили, будут полностью исключены из вашей production-сборки. Это означает, что вы не понесёте затрат, если одна из ваших зависимостей случайно импортирует полифилл для одного из этих API.

Список встроенных API и полифиллов, которые они заменяют:

• fetch() — Заменяет: whatwg-fetch и unfetch.
• URL — Заменяет: пакет url (Node.js API).
• Object.assign() — Заменяет: object-assign, object.assign и core-js/object/assign.

Вам всё ещё нужно импортировать isomorphic-fetch или isomorphic-unfetch, если вы используете fetch() на сервере.

Это изменение полностью обратно совместимо, и все полифиллы реализованы в наиболее соответствующих спецификации версиях. В результате до 18kB JavaScript исключено из ваших production-бандлов в современных браузерах.

Оптимизированная загрузка страниц: улучшенные FCP и TTI

Next.js оптимизировал реализацию предзагрузки для уменьшения FCP и общего TTI.

Обойдя ошибку браузера, CSS (при использовании) теперь правильно приоритизируется над JavaScript. Это приводит к более быстрому First Contentful Paint, что делает ваш сайт визуально завершённым быстрее для конечных пользователей.

Кроме того, мы оптимизировали предзагрузку страниц, используя запросы с более низким приоритетом.

Более того, эти запросы происходят только во время простоя браузера, что приводит к более быстрому time-to-interactive. Это связано с тем, что браузер будет отдавать приоритет интерактивности вашего приложения перед оптимистичной предзагрузкой.

FCP/TTI до и после оптимизаций

Поддержка новейших возможностей JavaScript

Next.js имеет продвинутый, высокооптимизированный конвейер компиляции, позволяющий использовать последние возможности JavaScript. Недавние оптимизации напрямую способствовали сокращению размера приложений на 3-8%.

Эти возможности JavaScript можно использовать, не беспокоясь о совместимости с браузерами, так как мы автоматически компилируем ваш код для поддержки всех браузеров (за исключением устаревших версий). Это включает функции ES6+, такие как async/await (ES2017), Object Rest/Spread Properties (ES2018), Dynamic import() (ES2020) и другие!

В этом релизе мы рады объявить о поддержке Опциональной цепочки (Stage 4) и Нулевого слияния (Stage 4).

function Page(props) {
  return (
    <p>{props?.deeply?.nested?.value}</p>
    /* ⬆ Если deeply.nested.value недоступно, оно не будет отрендерено */
  );
}
 
export default Page;

Оператор опциональной цепочки (?.)

function Page(props) {
  return (
    <p>{props.something ?? 'Значение по умолчанию'}</p>
    /* ⬆ возвращает "Значение по умолчанию" */
  );
}
 
export default Page;

Оператор нулевого слияния (??)

В будущем мы планируем выводить ещё более оптимизированные бандлы через автоматические сборки module / nomodule.

Поддержка zero-конфигурации для приложений с next export

Команда next export Next.js теперь работает с Zero Configuration Vercel из коробки. До этого изменения пользователям, использующим next export, требовалось создавать пользовательский now.json.

Использование режима export в Next.js на Vercel теперь так же просто, как наличие следующего скрипта build в package.json:

{
  "scripts": {
    "build": "next build && next export"
  }
}

Затем вы можете развернуть ваше приложение Next.js на Vercel всего одной командой. Если у вас ещё не установлен Vercel, вы можете сделать это, установив Vercel CLI.

now

Совместимость с React Strict Mode и возможность включения

Вся среда выполнения Next.js теперь совместима с Strict Mode. Это включает обновления менеджера заголовков (<Head>), next/dynamic и других основных функций. Это означает, что среда выполнения теперь использует хуки или избавилась от устаревших методов жизненного цикла, а также использует новое Context API React.

Мы также добавили удобную опцию для включения Strict Mode в вашем приложении.

Для этого настройте следующую опцию в вашем next.config.js:

module.exports = {
  reactStrictMode: true,
};

Если вы или ваша команда ещё не готовы использовать Strict Mode во всём приложении, это нормально! Вы можете постепенно мигрировать, включая его на отдельных страницах с помощью <React.StrictMode>.

Хотя это не обязательно, Strict Mode откроет множество оптимизаций в будущем. Поэтому мы рекомендуем изучить его раньше, чем позже!

Автоматическое тестирование с nightly-сборками React

В тесном сотрудничестве с основной командой React мы теперь тестируем Next.js с каналом next React каждые 12 часов.

Эти тесты помогают гарантировать, что мы готовы и совместимы с будущими релизами React. Совместимость — это то, что Next.js очень серьёзно воспринимает, и мы стремимся к долгосрочной стабильности API Next.js.

Этот процесс был задокументирован основной командой React в надежде, что другие проекты в экосистеме React последуют их примеру.

Сообщество

Мы рады предстоящим изменениям, которые улучшат размер и производительность всех приложений Next.js.

Кроме того, сообщество Next.js продолжает расти:

• У нас было более 865 независимых участников.
• На GitHub проект получил более 43,700 звёзд.
• Каталог примеров содержит более 220 примеров.

Сообщество Next.js насчитывает более 13,600 участников. Присоединяйтесь!

Мы благодарны нашему сообществу и всем внешним отзывам и вкладам, которые помогли сформировать этот релиз.