Next.js 13 был анонсирован недавно на Следующая конф с множеством новых (и усовершенствованных) функций, которые упростят процесс написания и поддержки внешнего кода для софтверных компаний (и разработчиков), таких как наша (itmtb.com) проще за счет улучшения качества, эффективности и удобочитаемости кода.

Некоторые из этих функций:


Серверные компоненты по умолчанию:

Помните об использовании getStaticProps, getStaticPaths а также getServerSideProps? Что ж, в Next 13 они устареют. Хороший ли это шаг? В большинстве случаев да. Возьмите простой код ниже, например:

Поддержка на стороне сервера в Next <= 12 против Next 13

Поддержка на стороне сервера в Next <= 12 против Next 13

Помимо того, что серверные компоненты делают код более читабельным, они дают и другие преимущества, например, сокращение количества клиентских пакетов JavaScript.

В больших производственных приложениях с большим количеством зависимостей разработчикам становится очень сложно уменьшить размер пакета без ущерба для функциональности. С серверными компонентами большая часть зависимостей никогда не достигает клиентской стороны, что резко уменьшает размер пакета.

Однако клиентские компоненты по-прежнему имеют свое назначение, и любой компонент можно сделать клиентским, просто добавив 'use client' как самая первая строчка. Всякий раз, когда вам нужно повторно выполнить рендеринг или использовать useEffect вы можете легко сделать компонент на стороне клиента.

Клиентский компонент в Next 13

Клиентский компонент в Next 13


Удивительная система компоновки:

Next.js 13 представляет новую систему компоновки на уровне маршрута.

Например, теперь у нас может быть собственный макет для всех страниц в /blog маршрут. Просто поместите макет в layput.{js/jsx/ts/tsx} под blog папка в pages (или же app в каталоге Next.13).

У вас даже может быть собственный компонент ошибки или компонент загрузки на основе маршрутов. Это определенно делает работу разработчиков намного лучше и проще. Макеты даже сохраняют состояние и не перерисовываются.

Более глубокое объяснение макета в Next 13:


Турбопак:

Будем честны, веб-пакет был неотъемлемой частью Интернета, но со временем показал свои недостатки. Он имеет свою долю неисправимых вопросы и он достиг предела производительности для сборщика, написанного на JavaScript.

Турбопак, упаковщик, написанный на Rust, утверждает, что решает эту проблему. Согласно утверждениям Vercel, это:

  • Обновления в 700 раз быстрее, чем Webpack
  • Обновления в 10 раз быстрее, чем Vite
  • Холодный запуск в 4 раза быстрее, чем Webpack

Тесты сами по себе являются предметом споров, например, те, которые утверждают, что Turbopack в 10 раз быстрее, чем Быстрый:

Тем не менее, он быстрее, чем Vite (намного быстрее, чем webpack) и подает большие надежды.


Изображение и шрифт:

Next.js 13 лучше next/image с тех пор:

  • Работает быстрее, поскольку отправляет меньше JavaScipt на сторону клиента и не требует гидратации.
  • Требует alt тег по умолчанию для лучшей доступности.
  • Легче стилизовать.

Next.js 13 также представляет система шрифтов через который вы можете использовать любой шрифт Google, без отправки запроса в Google из браузера. Шрифты загружаются во время сборки и размещаются в вашем проекте. Это повышает как конфиденциальность, так и производительность.


SEO:

Когда вы делитесь записью в блоге или страницей веб-сайта, вы бы заметили карточку, подобную приведенной ниже:

Социальная карта для SEO

Эта карта изготовлена ​​с использованием <meta> теги в <head> раздел страницы. Изображение создается с помощью

<meta property="og:image" content="img_url/path" />

. Vercel создал новую библиотеку, @vercel/ogкоторый работает с Next.js 13 для создания динамических социальных карт.

Вы можете явно создавать карточки профиля, используя @vercel/og как это:

import { ImageResponse } from '@vercel/og';
export const config = {
  runtime: 'experimental-edge',
};
export default async function handler() {
  return ImageResponse(
    (
      <div
        style={{
          backgroundColor: '#fff',
          backgroundImage: 'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
          backgroundSize: '100px 100px',
          height: '100%',
          width: '100%',
          textAlign: 'center',
          alignContent: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          display: 'flex',
        }}
      >
        <img
          alt="Vercel"
          width={255}
          height={225} 
src= "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE2IiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTU3LjUgMEwxMTUgMTAwSDBMNTcuNSAweiIgLz48L3N2Zz4="
          style={{ margin: '0 75px' }}
        />
        <div
          style={{
            fontSize: 60,
            marginTop: 30,
            lineHeight: 1.8,
          }}
        >
          Vercel Edge Network
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Приведенный выше код предоставляет нам карту ниже для этот URL.
(Полный код для проекта Next)

Пользовательская карточка профиля


Обновления серверной части:

Next.js, будучи фреймворком с полным стеком, также внес некоторые изменения в бэкэнд:

  • ПО промежуточного слоя
  • Теперь вы можете использовать промежуточное ПО для обработки rewrite а также redirect


Последние мысли:

Некоторые функции (например, next/font) все еще находятся в стадии бета-тестирования, и может пройти некоторое время, прежде чем они будут готовы к производству. Кроме того, миграция может быть не такой уж простой, учитывая серьезные изменения, происходящие в Next.js 13.

Несмотря на то, что компания Next предоставила руководство по переходу с v12 на v13миграция со старых версий все еще может быть сложной.

Но для новых проектов Next.js 13 кажется многообещающим. Это будет лучше почти во всех аспектах, будь то пользовательский опыт, опыт разработчиков или обслуживание, как для разработчиков, так и для компаний.