Третья ежегодная конференция Next.js была объявлена ​​NextJs 25 октября 2022 года. Они сделали смелый шаг, чтобы использовать широко используемую среду javascript и полностью изменить опыт разработчиков, поскольку вы увидите, что эти новые функции меняют правила игры и молниеносно быстро. Next.js 13 закладывает основу для безграничной динамичности. Нам предстоит многое распаковать с помощью совершенно нового инструмента сборки под названием Turbo Pack, так что пристегните ремень безопасности и приступим.

Возможности Next.js 13

Это следующие функции, представленные Next.js.

  1. Инфраструктура компилятора. Ранее Next.js разрабатывался на основе webpack, сборщика с открытым исходным кодом, который произвел революцию в разработке интерфейса. Next Js теперь включает совершенно новый инструмент сборки под названием Turbo Pack. Замена Webpack, которая в 700 раз быстрее в Rust.
  2. Инфраструктура маршрутизации и рендеринга. Далее в Js представлен переработанный подход к макетам, выборке данных и рендерингу на сервере, который включает меньше клиентского javascript.
  3. Компонентный инструментарий: (далее / изображение) Ленивая загрузка в нативных браузерах выполняется быстрее. (@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 предназначен для создания команды с амбициозными сложными приложениями.

На этом статья заканчивается; до следующего последнего технического обновления, хорошего дня 😊.