25 октября команда Next проведёт презентацию, посвящённую новой, 13-ой версии. Данное обновление по традиции именуют крупнейшим. Оно может затронуть буквально всё — от очередных ускорений сборки до изменений в структуре приложения и новых абстракций.
Next.js — крупнейший фреймворк для разработки веб-приложений. Он был создан 6 лет назад, 25 октября 2016 года. За это время было выпущено 12 крупных релизов, делая веб всё быстрее и быстрее. Несмотря на громоздкость фреймворка, размеры каждого последующего релиза не становились меньше, хоть и замедлялись в темпах.
Три года назад команда Next.js впервые провела конференцию, посвящённую релизу и сделали её ежегодной. Исключением стала презентация 11-ой версии, которая прошла в июне 2021 года. В данной статье речь пойдёт о том, какой функционал был завершён в последних обновлениях и что может нас ждать на завтрашней конференции.
О конференции и релизе
Это первая конференция, которая также будет проводиться в оффлайн режиме, в городе Сан-Франциско. При этом на онлайн конференцию зарегистрировалось более 90000 пользователей, желающих узнать в прямом эфире, что именно подготовила команда Vercel.
С последнего релиза было выпущено три минорных версии, последний раз подобное было в версии 9, для которой было выпущено целых пять минорных версий. Во многом это связано с тем, что предыдущая версия особенно отличалась количеством недоделанного функционала, выпущенного в релиз в альфа- и бета- версиях. В минорных обновлениях весь функционал постепенно завершали и переводили в раздел стабильного api.
Главным нетехническим изменением является новый логотип Next.js, который стал проще и чётче. Он стал ниже, тем самым удобнее в использовании на сайтах и в изображениях. При одинаковой ширине, высота уменьшилась в три раза.
Layout RFC
В мае этого года Nextjs неожиданно выпустил RFC (request for comments). В нём речь идёт, в первую очередь, о новой абстракции — layouts, а также о множестве связанных изменений, нацеленных на ускорение, улучшение DX и стандартизацию путём создания новых конвенций.
Это рабочее предложение буквально описывает будущий вид вид фреймворка и вышло настолько всеобъемлющий и масштабным, что о нём я решил написать отдельную статью — Layout RFC.
Middleware
Одним из крупнейших обновлений предыдущей версии были middleware. Они появились в качестве бета-функционала. Они были добавлены для взаимодействия с запросами пользователя в edge-рантайме, в том числе проводя rewrite-ы и redirect-ы. Изначально файлы именовались с нижним подчёркиванием в начале (_middleware) и хранились в корневой директории страниц.
С версии 12.2 файл именуется просто middleware и хранится в папке на уровень выше и только один на всё приложение (прежде таких файлов могло быть несколько). Уже в нём описывается, для каких именно путей он должен работать. Объясняется такое изменение ускорением работы и поддержке будущего Layout RFC.
On-Demand Incremental Static Regeneration (Stable)
Incremental Static Regeneration — подход к генерации страниц, позволяющий обновлять страницы инкрементально (т.е. после сборки приложения, когда оно уже запущено).
В версии 9.5 появился ISR, который работал по следующему принципу: для страницы указывался промежуток времени, страница обновлялась не чаще этого промежутка после запроса пользователя.
То есть страница сгенерировалась → пользователи видят сгенерированную страницу → по истечению промежутка времени первый запрос запустит пересборку страницы, но данный пользователь получит старую версию → после завершения сборки пользователи будут получать новую версию, а промежуток начнётся сначала.
В версии 12.1 в качестве бета-функционала появился новый подход для инкрементальной регенерации. Теперь в любом api можно вызвать пересборку страницы, вызвав метод в объекте response (res.revalidate("/path/to/page/")). В версии 12.2 функционал переведён в статус stable.
Улучшенная поддержка SWC
Ускорение сборки является неотъемлемой частью каждого релиза Next.js. В этот раз сборка ускорилась ещё на 40%. Минификация же стала быстрее в целых 7 раз.
Несмотря на столь значимое ускорение, минификация с SWC по умолчанию отключена и для включения в конфиг нужно добавить специальный флаг — swcMinify. Со следующего релиза данный функционал будет по умолчанию будет включён.
Самостоятельная папка
Для работы приложения на сервер нужно передать ряд необходимых файлов — пакеты, публичные файлы и собранное приложение. Последнее в свою очередь содержит множество ненужных для запуска файлов, занимающих много ценного места.
Целью нового функционала является создать самостоятельную папку, которая будет содержать все необходимые для работы приложения файлы и ничего лишнего. Активируется она добавлением в конфиг ключа output со значением standalone.
Однако данная папка не совсем самостоятельна, так как впоследствии в неё нужно перенести модули и папку public, что показано в примере от Next.js в докер-файле.
Изображения
В Nextjs для изображений используется свой компонент, который умеет динамически сжимать изображения и добавлять им нужные стили. Он постоянно обновлялся, то улучшая процессы и DX, то ускоряя процесс сжатия.
В следующем релизе будет добавлен новый компонент для работы с изображениями. На данный момент он храниться по пути next/future/image. В следующем релизе он будет перенесён в next/image, а старый компонент, в свою очередь, будет доступен по пути next/legacy/image.
Это могло работать для всех изображений, в т.ч. расположенных вне сайта, поэтому можно было указать с каких доменов могут быть загружены изображения и, как следствие, сжаты. Для этого в конфиг добавлялся ключ images.domains. В последних обновлениях был добавлен ключ images.remotePatterns, который в отличии от предыдущего варианта проверяет соответствие (match), а не точное совпадение.
Также теперь оптимизацию изображений можно будет отключить вовсе, добавив в конфиг флаг images.unoptimized.
Улучшения поддержки react
Команда Next.js всегда подготавливается к будущим релизам react.js заранее. Так, поддержка react v18 появилась ещё до официального релиза версии, а серверные компоненты начали тестироваться ещё до их чёткого видения. В новом предложении помимо функционала Next.js, также описываются и серверные компоненты, которые теперь полноценно войдут в процесс.
В последнем релизе Next.js представил ряд обновлений, связанных с react, доступных в альфа-версии. В том числе Server-Side Suspense, Streaming SSR, и серверные компоненты. В версии 12.1 функционал был перемещён в бета версию. В следующей версии, вероятно, функционал будет переведён в стабильную версию вместе с выходом Layout RFC.
Прочие изменения
Middleware, работающие в edge-рантайме хорошо себя показали и команда Next продолжила его развитие, перенося в него свой функционал. Так, в версии 12.2 была добавлена возможность работы API-роутов и генерации страниц в edge-рантайме, а также было настроено edge SSR.
Другим приятным изменением является то, что для компонента ссылок больше не нужно добавлять тег <a> в качестве дочернего элемента. Сейчас данный функционал можно включить в конфиге, а со следующего релиза это будет работать так по умолчанию.
Дополнительные утилиты
Была создана новая утилита для генерации OG изображений, используемых для предпросмотра ссылок в социальных сетях и мессенджерах, когда ими делятся. Изображения генерируются в 5 раз быстрее альтернатив и происходит на 40% лучше.
Для того, чтобы работал данный функционал создаётся специальный API-роут, возвращающий JSX с разметкой будущего изображения.
Данный функционал уже используется для всех изображений для предпросмотра в страницах Vercel и в билетах конференции.
Подробнее можно почитать в статье от Vercel.
Обновления платформы Vercel
Интересными обновлениями также являются изменения в платформе Vercel. Одним из самых интересных обновлений платформы в последний годы является Vercel preview, в котором можно в режиме коллаборации смотреть сайты, изменять их код и писать комментарии.
C последнего релиза в платформе улучшился процесс добавления комментариев, сделав это удобнее, а также добавлены скриншоты, уведомления и синхронизация всего со Slack.
Сообщество
Next всегда уделяет внимание своему сообществу, благодаря которому он так активно растёт и развивается. В каждом обновлении говорят слова благодарности сообществу, а при релизах любят поделиться ростом этого сообщества и, думаю, этот релиз не станет исключением, ведь количество участников выросло c 1800 до 2300 (на 30%).
С момента последнего релиза прошёл первый Developer Survey. Также было улучшено Discord Community.
Заключение
Последняя версия была опубликована всего спустя 4,5 месяца после предыдущей. Она содержала множество изменений, однако большинство из них находились на стадиях альфа- и бета-тестирования. В связи с этим большая часть дальнейших обновлений была посвящена именно доработке существующего функционала. Несмотря на это, команда Next.js подготовила и выпустила или подготовила множество интересных нововведений.
Самым интересным и перспективным нововведением стоит назвать Layout RFC, который в перспективе может значительно улучшить процессы и решить ряд разработческих проблем.
Уже 25 октября, в 19:30 CET (20:30 МСК), команда Vercel проведёт конференцию, на которой представит новый релиз Next.js. На ней мы узнаем, что именно войдёт в новый релиз в качестве готового к использованию функционала, какие планы у компании и сможем посмотреть выступления от разработчиков компании Vercel и других крупных компаний.