Целью разработки Next.js является создание амбициозных и сложных приложений для команд. И для этого Next.js начинался как среда React для динамически отображаемых сайтов.
Были ограничения на оценку динамического потенциала Next.js. Некоторые ограничения затрудняли поддержание его эффективности. Раньше использование next.js требовало покупки дорогостоящей постоянно доступной инфраструктуры, которая требовала ручной подготовки и длительных операций.
Это были основные аргументы команды Next.js в пользу выпуска версии, которая была динамичной без ограничений.
Что делает Next.JS 13 безграничным.
Три основные категории обновления Next.js 13 включают:
- Инфраструктура компилятора
- Инфраструктура рендеринга
- Инструментарий компонента
Итак, давайте углубимся в то, что влечет за собой каждое объявление.
1. Турбопак
Изначально было очевидно, что для написания инструментов JavaScript на JavaScript необходимо использовать такие инструменты, как Babel, Terser и WebPack. Все эти инструменты изо всех сил старались не отставать от растущих размеров и сложности клиентских приложений. С этой целью был предпринят переход на инструменты, работающие от ржавчины. Это началось с отказа от Babel, что привело к ускорению транслитерации в 17 раз.
Затем был заменен Терсер, что привело к шестикратному увеличению скорости минификации. Точно так же Webpack стал настолько важным элементом разработки Интернета, что его необходимо было переработать, чтобы создать веб-упаковщик следующего поколения.
Таким образом, в последней версии Next.js представлен основанный на ржавчине преемник WebPack под названием TurboPack.
TurboPack в Next.js 13 показывает,
- Обновления в 700 раз быстрее, чем Webpack
- Обновления в 10 раз быстрее, чем Vite
- Холодный запуск в 4 раза быстрее, чем Webpack
2. Новый каталог приложений
Еще одним важным компонентом Next.js является маршрутизатор на основе файловой системы, который не требует настройки. Предоставив эту функцию крупнейшим веб-приложениям в мире, она предлагает новые возможности для ее еще большего улучшения.
Новый каталог приложений поддерживает другие атрибуты, такие как макеты, серверные компоненты, потоковая передача и выборка данных.
3. Свежая система шрифтов
Next.js 13 представляет новую систему шрифтов с невероятными свойствами.
- Автоматическая оптимизация шрифтов, включая пользовательские
- Улучшенная конфиденциальность и производительность за счет удаления внешних сетевых запросов
- Интегрированный импровизированный хостинг для любого файла шрифта
- Автоматический нулевой сдвиг макета с помощью свойства CSS size-adjust
4. Новый компонент изображения
В новой версии были внесены значительные улучшения в компонент изображения с точки зрения производительности и опыта разработчиков. Этот новый компонент изображения был разработан для веб-систем, доступных через все основные браузеры.
- Встроенная отложенная загрузка
- Более высокая производительность
- Улучшенная доступность
- Уменьшенный размер
- Меньше использования JavaScript на стороне клиента
- Сохраняет знакомый интерфейс
5. Динамические социальные карты
Next.js 13 представляет экономичное и многофункциональное решение для создания динамических социальных карт. Этот прогноз в пять раз быстрее, чем текущее решение. Он использует пограничные функции Vercel, веб-сборку и сложную новую базовую библиотеку для преобразования HTML и CSS в изображения, а также Абстракция компонента React.
@vercel/og спонтанно добавит правильные заголовки к кэшированным изображениям на краю, что поможет сделать эту функцию рентабельной.
Другие функции включают в себя:
- Абсолютное позиционирование основных макетов CSS
- Настройка шрифтов, обтекание текстом, центрирование и вложенные изображения
- Совместимость с любыми развернутыми платформами и приложениями Vercel
6. Обновления API промежуточного слоя
ПО промежуточного слоя в Next.js 13 теперь может изменять заголовки запросов, заголовки ответов и отправлять ответы. Он позволяет выполнять код до завершения запроса и может даже влиять на ответ, переписывая, перенаправляя, обновляя заголовки запроса или ответа или отвечая напрямую.
Посмотрите, как вы можете установить заголовки запросов и ответов с помощью API NextResponse,
Заворачивать
Next.js 13 позволяет вам использовать инструменты, которые отдают приоритет доступности и эффективности, что очень важно, поскольку позволяет вам сосредоточиться на идеях и экспериментах в рамках проекта. Создавая более быструю, более производительную и доступную сеть, люди смогут работать так легко и эффективно, как они хотят, где бы они ни находились.
Главный источник -
