Next.js 11 | Next.js Русский

Как мы анонсировали на Next.js Conf, наша миссия по созданию лучшего опыта разработчика продолжается с Next.js 11, включая:

Соответствие (Conformance): Система, предоставляющая тщательно разработанные решения для оптимального UX.
Улучшенная производительность: Дополнительные оптимизации для сокращения времени холодного старта, чтобы вы могли быстрее начать кодить.
next/script: Автоматический приоритет загрузки сторонних скриптов для улучшения производительности.
next/image: Уменьшение сдвига макета (Layout Shift) и создание более плавного визуального опыта с автоматическим определением размеров и поддержкой размытых заглушек.
Webpack 5: Теперь включен по умолчанию для всех приложений Next.js, предоставляя эти преимущества всем разработчикам.
Миграция с Create React App (экспериментальная): Автоматическое преобразование приложений Create React App для совместимости с Next.js.
Next.js Live (превью-релиз): Кодинг в браузере с вашей командой в реальном времени.

Обновитесь сегодня, выполнив npm i next@latest react@latest react-dom@latest, и ознакомьтесь с руководством по миграции ниже.

Соответствие (Conformance)

Даже с отличными инструментами и автоматическими оптимизациями во фреймворках владельцам сайтов и разработчикам часто приходится становиться экспертами в вопросах качества UX, таких как производительность, безопасность и доступность. По мере добавления функций и масштабирования команд разработчикам нужно думать иначе.

Благодаря работе над крупномасштабными веб-приложениями, такими как Поиск и Карты, Google доказал, что фреймворки могут играть ключевую роль в поддержании качества по мере роста команд и приложений. Используя систему строгих умолчаний и защитных механизмов, они позволяют разработчикам больше сосредоточиться на функциях и продуктах.

Сегодня команда Web Platforms Google начала открывать исходный код своей системы с Conformance для Next.js.

Conformance — это система, предоставляющая тщательно разработанные решения и правила для поддержки оптимальной загрузки и Core Web Vitals, с дальнейшими дополнениями для поддержки других аспектов качества, таких как безопасность и доступность. Эти решения освобождают вашу команду от необходимости запоминать все последние правила для оптимальной производительности загрузки, сохраняя при этом гибкость для принятия правильных решений для ваших приложений.

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

Чтобы начать работу с ESLint, выполните npx next lint после обновления до Next.js 11. Интеграция ESLint работает как для новых, так и для существующих приложений Next.js, предоставляя новый набор правил, помогающих разработчикам создавать лучшие приложения.

Terminal

$ npx next lint
Мы создали файл .eslintrc для вас и включили базовую конфигурацию ESLint для Next.js.
 
./pages/about.js
7:9  Предупреждение: Не включайте таблицы стилей вручную. См.: https://nextjs.org/docs/messages/no-css-tags.  @next/next/no-css-tags
10:7  Предупреждение: Внешние синхронные скрипты запрещены. См.: https://nextjs.org/docs/messages/no-sync-scripts.  @next/next/no-sync-scripts
 
./pages/index.js
4:10  Предупреждение: Не используйте HTML-тег <a> для навигации на /about/. Вместо этого используйте Link из 'next/link'. См.: https://nextjs.org/docs/messages/no-html-link-for-pages.  @next/next/no-html-link-for-pages
 
Нужно отключить некоторые правила ESLint? Узнайте больше здесь: https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules
 
✨  Готово за 1.94s.

Узнайте больше о Conformance для фреймворков в блоге Google.

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

Начиная с Next.js 10, мы были одержимы дальнейшим улучшением опыта разработчика в Next.js. В версиях 10.1 и 10.2 мы сократили время запуска до 24% и уменьшили 40% времени обработки изменений благодаря React Fast Refresh. Вы получаете эти удивительные улучшения скорости просто за счет обновления Next.js.

Next.js 11 включает еще одну оптимизацию Babel для дальнейшего сокращения времени запуска. Мы создали совершенно новую реализацию загрузчика Babel для webpack, оптимизировав загрузку и добавив слой кэширования конфигурации в памяти. На практике это означает никаких изменений для разработчиков, но в конечном итоге приведет к более быстрому опыту разработки.

Оптимизация скриптов

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

Веб-сайты часто нуждаются в сторонних сервисах для аналитики, рекламы, виджетов поддержки клиентов и управления согласием. Однако эти скрипты часто негативно влияют на производительность загрузки и могут ухудшить пользовательский опыт. Разработчики часто сталкиваются с трудностями при выборе места для их размещения в приложении для оптимальной загрузки.

С next/script вы можете определить свойство strategy, и Next.js автоматически расставит приоритеты для улучшения производительности загрузки:

beforeInteractive: Для критических скриптов, которые необходимо загрузить и выполнить до того, как страница станет интерактивной, например, для обнаружения ботов и управления согласием. Эти скрипты встраиваются в начальный HTML с сервера и выполняются до запуска собственного JavaScript.
afterInteractive (по умолчанию): Для скриптов, которые можно загрузить и выполнить после того, как страница станет интерактивной, например, для менеджеров тегов и аналитики. Эти скрипты встраиваются на стороне клиента и выполняются после гидратации.
lazyOnload: Для скриптов, которые могут подождать загрузки в свободное время, например, для чата поддержки и виджетов социальных сетей.

<Script
  src={url}
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

Вы также можете выполнить код после загрузки. Например, вы можете дождаться выполнения кода до тех пор, пока пользователь не даст согласие:

<Script
  src={url} // управление согласием
  strategy="beforeInteractive"
  onLoad={() => {
    // Если загрузка прошла успешно, вы можете загрузить другие скрипты последовательно
  }}
/>

Мы также изменили стандартный опыт загрузки скриптов в Next.js 11 с предзагрузки и async на defer. Сторонние скрипты часто конкурируют с более приоритетными ресурсами, такими как CSS, шрифты и изображения. Поддержание правильной последовательности относительно этих ресурсов, а также других скриптов, является излишней нагрузкой на разработчиков.

Предоставляя компонент Script со стратегией загрузки по умолчанию afterInteractive, разработчики теперь получают лучшие настройки по умолчанию для оптимальной производительности, с возможностью по-прежнему выбирать beforeInteractive при необходимости.

Чтобы узнать больше о технических решениях, стоящих за изменением стандарта, ознакомьтесь с RFC и проблемами предзагрузки от команды Google Chrome.

Улучшения изображений

Мы рады поделиться двумя наиболее запрашиваемыми функциями сообщества для компонента next/image, уменьшающими Cumulative Layout Shift и создающими более плавный визуальный опыт.

Автоматическое определение размеров (локальные изображения)

Используйте ключевое слово import для src изображения, чтобы автоматически определить width и height для статических изображений.

Например, использование встроенного компонента Image стало еще проще:

pages/index.js

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // При импорте изображения в качестве источника
    // не нужно определять `width` и `height`.
    <Image src={author} alt="Фото автора" />
  );
}

Заглушки изображений

next/image теперь поддерживает размытые заглушки для плавного перехода от пустого пространства к изображению и сокращения воспринимаемого времени загрузки, особенно для пользователей с медленным интернетом.

Чтобы использовать размытые заглушки, добавьте placeholder="blur" к вашему изображению.

<Image src={author} alt="Фото автора" placeholder="blur" />

Next.js также поддерживает размытие динамических изображений, позволяя предоставить пользовательский blurDataURL, который генерируется на сервере. Например, вы можете сгенерировать blurha.sh на сервере.

<Image
  src="https://nextjs.org/static/blog/next-11/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="Фото автора"
  placeholder="blur"
/>

Webpack 5

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

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

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

Миграция с Create React App

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

Чтобы помочь разработчикам преобразовать свои приложения в Next.js, мы представили новый инструмент в @next/codemod, который автоматически преобразует приложения Create React App для совместимости с Next.js.

Преобразование автоматически добавляет каталог pages/ и перемещает импорты CSS в нужное место. Оно также включает режим совместимости Create React App в Next.js, который обеспечивает работу некоторых шаблонов, используемых в Create React App, с Next.js.

Используя новое преобразование, вы можете постепенно внедрять Next.js, сохраняя функциональность существующего приложения Create React App.

Чтобы начать миграцию вашего проекта Create React App, используйте следующую команду:

Terminal

npx @next/codemod cra-to-next

Эта функция в настоящее время экспериментальная, пожалуйста, поделитесь любыми отзывами в этом обсуждении.

Next.js Live (превью-релиз)

Next.js Live — это продолжение нашей миссии сделать разработку не только быстрее и приятнее, но и, что особенно важно, более инклюзивной для всей организации. Используя передовые технологии, такие как ServiceWorker, WebAssembly и ES Modules, Next.js Live переносит весь процесс разработки в веб-браузер. Это открывает возможности, такие как совместная работа и мгновенный обмен по URL, без этапа сборки. Для разработчиков это означает более быструю обратную связь, меньше времени ожидания сборок и возможность совместного программирования и редактирования в реальном времени в браузере.

Чтобы узнать больше о Next.js Live и о том, как вы можете сочетать его с механизмом реального времени Vercel, см. раздел Next.js Live документации.

Руководство по обновлению

Next.js 11 вносит несколько критических изменений, которые не должны затронуть большинство пользователей. Эти устаревшие функции поддерживались обратно совместимым образом в течение многих лет, некоторые начиная с v4.0.

Эти функции были удалены для уменьшения размера сборки и обеспечения поддерживаемости кодовой базы в будущем. Чтобы узнать больше об обновлении с версии 10 до 11, ознакомьтесь с руководством по обновлению.

С Next.js 11 минимальная версия React обновлена до 17.0.2. Подробнее см. в блоге React 17. Мы также тесно сотрудничаем с командой React по мере внедрения React 18. Next.js 11 использует createRoot, когда используется React 18 alpha.

Сообщество

Next.js — это результат совместной работы более 1600 отдельных разработчиков, отраслевых партнеров, таких как Google и Facebook, и нашей основной команды.

Мы гордимся тем, что видим, как это сообщество продолжает расти. Только за последние шесть месяцев мы наблюдаем 50%-ный рост загрузок Next.js в NPM — с 4,1 млн до 6,2 млн, а количество домашних страниц, использующих Next.js в топ-10 000 Alexa, выросло на 50%.

Этот релиз стал возможен благодаря вкладу: @kahy9, @ljosberinn, @leerob, @kettanaito, @thomasboyt, @hussainanjar, @styfle, @devknoll, @LiuuY, @timneutkens, @housseindjirdeh, @PepijnSenders, @janicklas-ralph, @payapula, @tmtk75, @ijjk, @hiramhuang, @daku10, @atcastle, @matamatanot, @pelhage, @Lukazovic, @Mzaien, @gleich, @geshan, @Munawwar, @ykzts, @vitalybaev, @mottox2, @vvo, @chrisneven, @turneand, @d3lm, @akellbl4, @sokra, @johnjago, @alicanyildirim, @sanathusk, @valse, @samrobbins85, @SamVerschueren, @ademilter, @ctjlewis, @brandondc741, @eltociear, @martpie, @kasipavankumar, @joecohens, @alexbrazier, @jamsinclair, @fabianishere, @rokinsky, @msidqi, @rubensdemelo, @Simply007, @bradlc, @SinimaWath, @rgabs, @darshkpatel, @sumanthratna, @shuding, @prophet1996, @Joonpark13, @tremby, @stefanprobst, @dopt, @rishabhpoddar, @aydinkn, @ErfanMirzapour, @tubbo, @frontendtony, @eric-burel, @iker-barriocanal, @eps1lon, @Gigiz, @mplis, @HaNdTriX и @jigsawye.

Следующие функции были упомянуты на Next.js Conf, но были выпущены ранее в версиях 10,1 и 10,2:

Автоматическая оптимизация веб-шрифтов: Улучшенная производительность за счет встраивания CSS шрифтов.
Более быстрый Refresh: Ускорение на 100–200 мс.
Улучшения next/image: Поддержка Apple Silicon (M1), а также больше вариантов макета и загрузчика.
Интеграция Next.js Commerce с Shopify: Гибкий слой данных для компоновочных e-commerce приложений. Next.js Commerce в настоящее время поддерживает Shopify, BigCommerce, Saleor, Swell и Vendure.