BackНазад к блогу

Next.js 10.2

В Next.js 10.2 представлены улучшения производительности (более быстрые сборки, обновления и запуск), улучшенная доступность, автоматическая оптимизация веб-шрифтов и многое другое!

Мы рады представить Next.js 10.2 с новыми возможностями:

Обновитесь сегодня, выполнив npm i next@latest.

Webpack 5

В Next.js 10.1 мы улучшили Fast Refresh и сократили время установки. Теперь мы рады поделиться дополнительными улучшениями производительности, реализованными благодаря webpack 5.

Начиная с Next.js 10.2, все приложения, не использующие пользовательскую конфигурацию webpack в next.config.js, будут автоматически использовать webpack 5.

При включении webpack 5 вы автоматически получаете новые функции и улучшения:

  • Улучшенное кэширование на диске: Кэширование позволяет компилятору сохранять работу между запусками next build. Перекомпилируются только изменённые файлы, что повышает производительность. Клиент Vercel Scale наблюдал ускорение на 63% при последующих сборках.
  • Улучшенный Fast Refresh: Next.js теперь приоритизирует компиляцию, связанную с Fast Refresh, что делает каждое обновление на 100-200 мс быстрее.
  • Улучшенное долгосрочное кэширование ассетов: Результат нескольких запусков next build теперь детерминирован, улучшая кэширование JavaScript-ассетов в браузере в production. Хеши остаются неизменными, если содержимое страницы не меняется.
  • Улучшенное Tree Shaking: Модули CommonJS теперь могут быть оптимизированы для автоматического удаления неиспользуемого кода. Для определения модулей без побочных эффектов используется статический анализ. export * отслеживает больше информации и больше не помечает экспорт по умолчанию как используемый. Также включена внутренняя оптимизация модулей, позволяющая удалять импорты, используемые только в неиспользуемом экспорте.

Мы постарались обеспечить плавный переход с webpack 4 на 5. Набор тестов Next.js с более чем 3400 интеграционными тестами запускается для каждого pull request с поддержкой webpack 5.

Если ваше приложение использует пользовательскую конфигурацию webpack, рекомендуем следовать документации для включения webpack 5. После обновления до webpack 5 в Next.js, пожалуйста, поделитесь отзывом с нами.

Улучшенная производительность запуска

Мы улучшили инициализацию CLI Next.js, сократив время запуска next dev до 24% быстрее после первого запуска. Например, next dev для vercel.com сократилось с 3.3s до 2.5s.

Мы стремимся сделать вашу локальную среду разработки максимально быстрой (в 20 раз быстрее). Следите за новыми улучшениями производительности запуска в будущих релизах.

Улучшения доступности

Изменения маршрутов теперь по умолчанию объявляются программам чтения с экрана и другим вспомогательным технологиям.

Пример ниже показывает, как заголовок "Real Data. Real Performance" объявляется macOS VoiceOver при клиентской навигации. Имя страницы определяется сначала по элементу <h1>, затем по document.title и, наконец, по имени пути.

Изменения маршрутов теперь объявляются автоматически.

Благодарим Kyle Boss и Kitty Giraudel за помощь в реализации этой функции.

Маршрутизация на основе заголовков и параметров строки запроса

Next.js rewrites, redirects и headers теперь поддерживают новое свойство has, позволяющее сопоставлять входящие заголовки, куки и параметры строки запроса.

Клиент Vercel Joyn использует has для оптимизации контента как для обнаружения, так и для производительности. Например, можно перенаправлять старые браузеры на основе User-Agent:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

Другой пример — перенаправление пользователей в зависимости от их местоположения:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

Наконец, можно перенаправлять пользователей, уже вошедших в систему:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

Чтобы узнать больше и увидеть дополнительные примеры, ознакомьтесь с документацией по редиректам.

Автоматическая оптимизация веб-шрифтов

82% веб-страниц для ПК используют веб-шрифты. Пользовательские шрифты важны для брендинга, дизайна и кросс-браузерной/кросс-устройственной совместимости вашего сайта. Однако использование веб-шрифтов не должно снижать производительность.

Next.js теперь поддерживает автоматическую оптимизацию веб-шрифтов. По умолчанию Next.js автоматически встраивает CSS шрифтов во время сборки, устраняя дополнительный запрос для получения объявлений шрифтов. Это улучшает First Contentful Paint (FCP) и Largest Contentful Paint (LCP). Например:

// До
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// После
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    <!-- ... -->
  }
</style>

Автоматическая оптимизация веб-шрифтов в настоящее время поддерживает Google Fonts, и мы работаем над расширением поддержки для других поставщиков шрифтов. Мы также планируем добавить контроль над стратегиями загрузки и значениями font-display. Оптимизируя шрифты по умолчанию, мы помогаем разработчикам создавать более быстрые сайты и улучшать их Core Web Vitals без дополнительных усилий.

Благодарим наших партнёров в Google и Janicklas Ralph за помощь в реализации этой функции.

Рост команды

Мы рады объявить, что Tobias Koppers, автор webpack, присоединился к команде Next.js в Vercel.

Сообщество

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

Этот релиз стал возможен благодаря вкладу: @rpxs, @lemarier, @RayhanADev, @janicklas-ralph, @devknoll, @felipeptcho, @rishabhpoddar, @sokra, @m-leon, @turadg, @PierreBerger, @divmain, @dominikwilkowski, @pranavp10, @ijjk, @santidalmasso, @HaNdTriX, @jamesgeorge007, @garmeeh, @leerob, @shuding, @feute, @timneutkens, @alexvilchis, @Timer, @malixsys, @sahilrajput03, @marcvangend, @steven-tey, @julienben, @umarsenpai, @Mzaien, @merceyz, @AntelaBrais, @SystemDisc, @M1ck0, @jbmoelker, @jaisharx, @amannn, @vkarpov15, @gaelhameon, @4ortytwo, @Simply007, @styxlab, @xCloudzx, @wodCZ, @emmanuelgautier, @leosuncin, @ludder, @geritol, @vassbence, @vvo, @portenez, @arshad, @tarunama, @flybayer, @Hanaffi, @SokratisVidros, @chibicode, @kylemarshall18 и @jarrodwatts.