Третья ежегодная конференция Next.js была объявлена NextJs 25 октября 2022 года. Они сделали смелый шаг, чтобы использовать широко используемую среду javascript и полностью изменить опыт разработчиков, поскольку вы увидите, что эти новые функции меняют правила игры и молниеносно быстро. Next.js 13 закладывает основу для безграничной динамичности. Нам предстоит многое распаковать с помощью совершенно нового инструмента сборки под названием Turbo Pack, так что пристегните ремень безопасности и приступим.
Возможности Next.js 13
Это следующие функции, представленные Next.js.
- Инфраструктура компилятора. Ранее Next.js разрабатывался на основе webpack, сборщика с открытым исходным кодом, который произвел революцию в разработке интерфейса. Next Js теперь включает совершенно новый инструмент сборки под названием Turbo Pack. Замена Webpack, которая в 700 раз быстрее в Rust.
- Инфраструктура маршрутизации и рендеринга. Далее в Js представлен переработанный подход к макетам, выборке данных и рендерингу на сервере, который включает меньше клиентского javascript.
- Компонентный инструментарий: (далее / изображение) Ленивая загрузка в нативных браузерах выполняется быстрее. (@next / font) Автоматические автономные шрифты с нулевым смещением макета. (далее/ссылка) Больше нет необходимости вручную добавлять элемент a› в качестве дочернего элемента к следующему/ссылке.
1. Инфраструктура компилятора
В 2016 году естественным было написать инструментарий Javascript на языке Javascript. Это означает такие инструменты, как Babel, Treser и Webpack. но, как и в случае с babel и treser, пришло время полностью перейти на родное. Next.js представляет Turbopack, преемника Webpack на основе Rust. Turbopack показывает обновления в 10 раз быстрее, чем Vite, и в 700 раз быстрее, чем Webpack. Эти повышения скорости предназначены не только для обновлений кода, но и для запуска вашего локального сервера разработки.
Как только Turbopack выполняет задачу, он никогда не делает этого снова. Как и в случае с Turborepo, мы можем поделиться уже проделанной работой не только на вашем локальном компьютере, но и с командами всей вашей организации.
Вы можете попробовать альфа-версию Turbopack в NextJs 13 с:
next dev --turbo
2. Инфраструктура маршрутизации и рендеринга
Маршрутизатор на основе файловой системы — одна из самых популярных функций Next.js. Вы можете мгновенно создавать маршруты в своем приложении, перетаскивая файл в папку. Настройка не требуется. Next.js упрощает совместную выборку данных внутри компонентов, обеспечивая глобальную выборку данных в вашем приложении. Давайте посмотрим на пример:
Предположим, у нас есть Page.js, который является моей домашней страницей. На моей домашней странице есть два компонента, называемые боковой панелью и панелью навигации. Теперь я хочу использовать оба компонента с домашней страницы на другой странице, называемой страницей темы.
Таким образом, я могу преобразовать свой компонент в файл layout.js, который использует общий интерфейс для двух страниц.
Кроме того, в Next.js 13 добавлены такие функции, как встроенное кэширование, дедупликация запросов, программная повторная проверка и точная очистка данных во время выполнения. Это означает, что все преимущества ISR, выборки статических данных, выборки данных на стороне сервера и даже SWR теперь доступны в одном гибридном решении.
Подробнее о **извлечении данных.**
3. Инструментарий компонентов
следующий/изображение
Next.js 13 представляет новый мощный компонент изображения, который позволяет легко отображать изображения без изменения макета и оптимизировать файлы на лету для повышения эффективности.
Новый компонент изображения:
- Поставляется меньше клиентского JavaScript.
- Стиль и конфигурация упрощены.
- Более доступный, с обязательными по умолчанию тегами alt
- Соответствует веб-платформе
- Нативная отложенная загрузка выполняется быстрее, поскольку не требует увлажнения.
Чтобы обновить next/image до Next.js 13, выполните:
npx @next/codemod next-image-to-legacy-image ./pages
@следующий/шрифт
Эта новая система шрифтов позволяет легко использовать все шрифты Google, сохраняя при этом производительность и конфиденциальность. Файлы CSS и шрифтов загружаются и размещаются вместе с остальными вашими статическими ресурсами в процессе сборки. Браузер не делает запросов к Google.
Next.js 13 включает совершенно новую систему шрифтов, которая:
- Встроен автоматический самостоятельный хостинг для любого файла шрифта.
- Свойство CSS size-adjust используется для автоматического сдвига макета до нуля.
- Автоматически оптимизирует ваши шрифты, в том числе пользовательские.
- Повышает конфиденциальность и производительность за счет удаления внешних сетевых запросов.
// pages/_app.js import { Roboto } from '@next/font/google'
const roboto = Roboto({ weight: '400', })
export default function MyApp({ Component, pageProps }) { return ( <main className={roboto.className}> <Component {...pageProps} /> </main> ) }
Ознакомьтесь с документацией здесь: @next/font
далее/ссылка
Больше нет необходимости вручную добавлять› в качестве дочернего элемента для следующей/ссылки.
Мы предоставили кодмод, который автоматически обновит вашу кодовую базу, чтобы обновить ваши ссылки до Next.js 13. Например, при запуске из-под рута эта команда выполнит кодмод в вашем каталоге ./pages:
npx @next/codemod new-link ./pages
Ознакомьтесь с документацией здесь: далее/ссылка
Заключение
С каждым годом все больше популярных веб-приложений создается с помощью Next.js, особенно в розничной торговле, SasS и медиа, благодаря балансу между отличным опытом разработчиков и отличной производительностью пользователей. Next.js возник как React Framework для динамических серверов под сайтами. Вместо того, чтобы оптимизировать одностраничные приложения, Next.js предназначен для создания команды с амбициозными сложными приложениями.
На этом статья заканчивается; до следующего последнего технического обновления, хорошего дня 😊.