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

Компания 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. Если оба не поддерживаются, то исходный формат картинки.

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

  • ВКонтакте приглашает на новогоднее шоу «STAR трек»ВКонтакте приглашает на новогоднее шоу «STAR трек» Праздничное шоу «STAR Трек. Новый год ВКонтакте» пройдет в сообществе «Официальные страницы». Его можно будет посмотреть и на уличных экранах в центре Москвы: на фасадах кинотеатра «Октябрь» и гостиницы «Космос», а также на Таганской площади. Концерт начнется 1 января в 17:00 — зрителям […]
  • [Перевод] MPLS L3VPN поверх DMVPN: возвращение[Перевод] MPLS L3VPN поверх DMVPN: возвращение В одной из прошлых статей я описал способ реализации L3VPN поверх DMVPN, который позволяет организовать связность spoke-маршрутизаторов между собой напрямую, без необходимости отправлять трафик через hub. Одним из ключевых элементов этого способа было использование internal BGP labeled […]
  • Google устранил баг, связанный с soft 404Google устранил баг, связанный с soft 404 На прошлой неделе специалисты отрасли начали жаловаться на то, что Google ошибочно определяет их действующие страницы как soft 404, из-за чего они теряют позиции и трафик. Как выяснилось, это было связано с изменением в обработке soft 404 на стороне поисковой системы. Похоже, что […]
  • Минцифры и Роскомнадзор займутся учетом трансграничных линий связи и средств связи, которые к ним подключеныМинцифры и Роскомнадзор займутся учетом трансграничных линий связи и средств связи, которые к ним подключены По информации «ТАСС», Минцифры и Роскомнадзор займутся учетом трансграничных линий связи и средств связи, которые к ним подключены. 29 октября на федеральном портале проектов нормативных правовых актов опубликован проект постановления правительства «Об утверждении порядка ведения реестра […]