Next.js 13, последняя версия платформы React от Vercel для создания веб-приложений, добавляет предварительную версию более быстрого упаковщика, а также переработанный подход к серверному рендерингу, маршрутизации, макетам и выборке данных.
В Next.js 13, представленном 25 октября, сборщик Turbopack, написанный на Rust и все еще находящийся на стадии альфа-разработки, позиционируется как преемник Webpack. Предлагая повышенную скорость и лучшую архитектуру, Turbopack — это система сборки для JavaScript и TypeScript, предназначенная для инкрементных сборок. По словам Верселя, Turbopack в 700 раз быстрее Webpack при работе с большими приложениями.
В Next.js 13 также есть бета-версия app/Directory — усовершенствованная система маршрутизации на основе файловой системы, предназначенная для упрощения компоновки сложных интерфейсов и поддержания состояния во время навигации, избегая при этом дорогостоящих повторных рендерингов. Макеты можно определить через файловую систему. Кроме того, app/Directory предоставляет способ извлечения данных, созданный на основе React Suspense for Data Fetching, а также обеспечивает поддержку архитектуры React Server Component.
Серверные компоненты React предоставляют способ определения компонентов, к которым могут быть привязаны требования к данным и которые по умолчанию не оказывают влияния на клиента. По словам генерального директора Vercel Гильермо Рауха, это повышает производительность, особенно мобильных приложений.
Пользователи Next.js могут обновиться до версии 13, выполнив следующую команду:
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
Также в Next.js 13:
- Новая система шрифтов автоматически оптимизирует шрифты, включая пользовательские, и удаляет внешние сетевые запросы для повышения производительности и конфиденциальности. Система шрифтов также имеет встроенное автоматическое размещение любого файла шрифта и нулевое смещение макета, которое автоматически использует свойство регулировки размера CSS.
- Введен компонент изображения для отображения изображений без смещения макета. Компонент оптимизирует файл по требованию для повышения производительности и позволяет использовать меньше клиентского JavaScript.
- Библиотека,
@vercel/ogбыл создан для работы с Next.js для создания социальных карточек, которые представляют собой изображения открытых графов. - Минимальная версия React была увеличена с 17.0.2 до 18.20, а минимальная версия Node.js теперь составляет 14.0.0.
Хотя Next.js можно рассматривать как конкурента веб-фреймворка Google Angular, у Next.js, тем не менее, есть сторонник в Google: Келси Хайтауэр, выдающийся инженер Google и технический консультант Vercel, которая участвовала в конференции Next.js Conf 22 на этой неделе. в Сан-Франциско.
«Самая большая разница, которую я видел между ними, заключается в том, что Next.js фактически вызывает проблему многоуровневых вычислений», — сказал Хайтауэр. Хотя многие интерфейсные платформы предназначены для того, что можно сделать на стороне клиента, Next.js предоставляет компонент CDN (сеть доставки контента); Вычисления могут выполняться в CDN, на один уровень ниже браузера.
Но Хайтауэр не был готов заявить, что Next.js явно превосходит Angular. «Это все равно, что сказать: iOS лучше Android? Вы можете попытаться провести такое сравнение».
