Компания Vercel выпустила глобальное обновление Next.js 12, имеющее ряд новых функций и увеличивающее производительность уже существующих. Например, добавлена поддержка ES-модулей, появился новый компилятор Rust и новая автоматическая пакетная обработка обновлений. Над Next.js кроме команды Next.js работали более 1,8 тысяч независимых разработчиков и специалисты из Google и Facebook.

Разработчики Next.js начали доклад с презентации поддержки ES-модулей. Это позволит уменьшить количество пакетов для конечных пользователей и параллельно привести к единообразию конечный проект. В новой версии Next.js также появилась возможность встраивать различные модули и дизайнерские решения с помощью экспериментальной поддержки импорта через URL-адреса. То есть достаточно импортировать URL-адрес модуля в код — и нужный модуль будет сразу встроен в проект. Это поможет бесшовно встраивать нужные модули быстрее и проще. По данным сайта разработчика, эта опция находится в beta-режиме.

Появился новый компилятор Rust, построенный на SWC открытой платформы следующего поколения быстрых инструментов (fast tooling). Возможности нового компилятора тут же продемонстрировали на конференции. В показанном примере новый компилятор отработал в два раза быстрее по сравнению со своим более старым собратом.

Следующей новинкой стала возможность работы с кодом из браузера Next.js Live. Это позволит вносить правки и коррективы в режиме реального времени без постоянных компиляций, а также даст возможность работать специалистам в режиме онлайн без привязки к рабочему месту. К тому же, это отличный способ быстрее взаимодействовать не только разработчикам, но и специалистам из смежных областей (дизайнерам, менеджерам проектов и не только).

Помимо Next.js Live на конференции рассказали о Next.js Analytics, представленной ещё в октябре 2020 года. Этот инструмент поможет анализировать ресурс сразу после сборки, минимизировать появление ошибок и улучшить производительность. От Next.js Analytic представители компании Vercel перешли к инструментам Middleware и Edge Function от Vercel. В зависимости от входящего запроса пользователя они могут изменить ответ, переписать, перенаправить, добавить заголовки или даже изменить потоковую передачу HTML.

Поскольку Next.js сотрудничает c React из Facebook, готовящийся 18 релиз поддерживает собственный API от Next.js, но пока в тестовом режиме. На данный момент в React 18 добавит такие функции, как Suspense, автоматическая пакетная обработка обновлений, API (такие как start Transition) и новый потоковый API для рендеринга сервера с поддержкой React.lazy. Также часть функций типа Suspense и поддержка потоковой передачи SSR будут на стороне сервера. Это позволяет отображать страницы на сервере с использованием потоковой передачи HTTP. Но это пока на альфа-тестировании в Next.js 12.

А теперь к React Server Components. Его функционал позволяет отображать на сервере целиком весь проект без предварительной генерации HTML-кода. Поэтому в JavaScript у клиента нет необходимости, что ускоряет рендеринг страниц. Данная функция тоже находится на альфа-тестировании.

Встроенный API оптимизации изображений Next.js 12 теперь поддерживает изображения формата AVIF, позволяя на 20% уменьшать их размер по сравнению с WebP. Конечно, оптимизация изображений AVIF может занять больше времени по сравнению с WebP, поэтому можно включать эту функцию, а можно не включать. При включении функции, если браузер поддерживает AVIS, будет отображаться формат AVIS, если нет — то WebP. Если оба не поддерживаются, то исходный формат картинки.

Компания Vercel на онлайн конференции Next.js Conf представила обновление Next.js 12