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

Компания Versel выпустила глобальное обновление 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 представители компании Versel перешли к инструментам  Middleware и Edge Function от Versel. В зависимости от входящего запроса пользователя они могут изменить ответ, переписать, перенаправить, добавить заголовки или даже изменить потоковую передачу 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. Если оба не поддерживаются, то исходный формат картинки.

Читайте так же:

  • Дизайн-спринт: Основы методаДизайн-спринт: Основы метода Описание Онлайн-курс для начинающих спринт-мастеров по основам методологии «дизайн-спринт» от Google Ventures c сертификатом спринт-мастера. Научитесь двигать команду от исследований до прототипа за 5 дней!Дизайн-спринт — новый формат образовательного […]
  • 7 артефактов проектирования, которые улучшат дизайн7 артефактов проектирования, которые улучшат дизайн Когда кто-то сегодня говорит о UX, довольно часто он имеет в виду не проектирование пользовательского опыта, а визуальный дизайн. И это объяснимо. Сам по себе интерфейс (UI) уже представляет собой некий конечный продукт, и он прост для понимания. Но проекты давно перестали быть настолько […]
  • Нейродайджест: главное из области машинного обучения за август 2021Нейродайджест: главное из области машинного обучения за август 2021 Новая архитектура-генералист для работы с комбинированными типами данных от DeepMind, генерация внешности от младенчества до глубокой старости, синтез фотореалистичных изображений по наброску и многое другое в августовской подборке. Perceiver IO Доступность: публикация в блоге / статья / […]
  • Самый доступный флагман Realme GT подешевел до новой рекордной отметки в КитаеСамый доступный флагман Realme GT подешевел до новой рекордной отметки в Китае Как пишет Mydrivers. Флагманский китайский магазин Suning Tesco Tmall снизил цену недорогого смартфона Realme GT до рекордно низкой отметки. Изначально версия с 8 ГБ оперативной и 128 ГБ флеш-памяти стоила 430 долларов. А сейчас она подешевела до 385 долларов. Это самый доступный […]