Next.js 11.1

Мы улучшаем производительность сборки во всем стеке с Next.js 11.1, включая:

• Патч безопасности: Важное обновление для предотвращения потенциальных открытых перенаправлений.
• Поддержка ES Modules: Доступно сегодня с экспериментальным флагом.
• Инструменты на Rust: Интеграция SWC для замены JS-инструментов (Babel и Terser).
• Ускоренное получение данных: В 2 раза быстрее получение данных с HTTP keep-alive при предварительном рендеринге.
• Ускоренные Source Maps: На 70% быстрее сборка и на 67% меньше использования памяти при работе с source maps.
• Улучшения интеграции ESLint: Более доступные настройки по умолчанию и проверка опечаток.
• Улучшения next/image: Опциональное использование Sharp, лучшая поддержка next export.

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

Патч безопасности

Команда Next.js работает с исследователями безопасности и аудиторами для предотвращения уязвимостей. Мы благодарим Gabriel Benmergui из Robinhood за исследование и обнаружение открытого перенаправления с pages/_error.js и последующее ответственное раскрытие информации.

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

Для получения дополнительных сведений прочитайте публичный CVE. Мы рекомендуем обновиться до последней версии Next.js для повышения общей безопасности вашего приложения. Для ответственного раскрытия отчетов в будущем пишите нам на [email protected].

Примечание: Приложения Next.js, размещенные на Vercel, не подвержены этой уязвимости (поэтому никаких действий не требуется для ваших приложений Next.js, работающих на Vercel).

Поддержка ES Modules

Мы работаем над расширенной поддержкой ES Modules в Next.js, как для входных модулей, так и для целевого вывода. Начиная с Next.js 11.1, вы можете импортировать npm-пакеты, использующие ES Modules (например, "type": "module" в их package.json), с экспериментальным флагом.

module.exports = {
  // Предпочитать загрузку ES Modules вместо CommonJS
  experimental: { esmExternals: true },
};

Поддержка ES Modules включает обратную совместимость для поддержки предыдущего поведения импорта CommonJS. В Next.js 12 esmExternals: true станет значением по умолчанию. Мы рекомендуем попробовать новую опцию и оставить отзыв в GitHub Discussions, если у вас есть предложения по улучшению.

Переход на SWC на Rust

Мы работаем над интеграцией SWC, сверхбыстрого компилятора JavaScript и TypeScript, написанного на Rust, который заменит два инструментария, используемых в Next.js: Babel для отдельных файлов и Terser для минификации выходных бандлов.

В рамках замены Babel на SWC мы переносим все пользовательские преобразования кода, которые использует Next.js, в преобразования SWC, написанные на Rust, для максимальной производительности. Например, tree shaking неиспользуемого кода внутри getStaticProps, getStaticPaths и getServerSideProps.

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

В ранних тестах предыдущие преобразования кода с использованием Babel сократились с ~500мс до ~10мс, а минификация кода с Terser сократилась с ~250мс до ~30мс при использовании SWC. В целом это привело к удвоению скорости сборки.

Мы рады сообщить, что DongYoon Kang, создатель SWC, и Maia Teegarden, участник проекта Parcel, присоединились к команде Next.js в Vercel для работы над улучшением производительности next dev и next build. Мы поделимся дополнительными результатами нашего перехода на SWC в следующем релизе, когда он станет стабильным.

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

Сборки и получение данных

При использовании next build и выполнении многочисленных HTTP-запросов мы улучшили производительность примерно в 2 раза в среднем. Например, если вы используете getStaticProps и getStaticPaths для получения контента из Headless CMS, вы должны заметить значительно более быстрые сборки.

Next.js автоматически полифиллит node-fetch и теперь по умолчанию включает HTTP Keep-Alive. Согласно внешним тестам, это должно сделать предварительный рендеринг примерно в 2 раза быстрее.

Чтобы отключить HTTP Keep-Alive для определенных вызовов fetch(), вы можете добавить опцию agent:

import { Agent } from 'https';
const url = '<https://example.com>';
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

Чтобы переопределить все вызовы fetch() глобально, вы можете использовать next.config.js:

module.exports = {
  httpAgentOptions: {
    keepAlive: false,
  },
};

Source Maps

Включение source maps для браузера в приложениях Next.js теперь имеет примерно на 70% меньше затрат на производительность и примерно на 67% меньше затрат на память благодаря оптимизациям обработки ассетов и source maps в webpack.

Это касается только приложений Next.js с productionBrowserSourceMaps: true в их файле next.config.js. С Next.js 11.1 время сборки увеличивается только на 11% при включенных source maps.

Мы также работали с Sentry над увеличением производительности загрузки source maps с помощью плагина Sentry для Next.js.

Улучшения ESLint

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

Правила доступности по умолчанию

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

• aria-props
• aria-proptypes
• aria-unsupported-elements
• role-has-required-aria-props
• role-supports-aria-props

Особая благодарность участнику сообщества JeffersonBledsoe за добавление этих правил.

Распространенные опечатки

Теперь по умолчанию будут выдаваться предупреждения для распространенных опечаток в getStaticProps, getStaticPaths и getServerSideProps. Это поможет в случаях, когда небольшая опечатка приводит к тому, что получение данных не вызывается. Например, getstaticprops или getStaticprops вызовут предупреждение.

Особая благодарность участнику сообщества kaykdm за создание этого правила.

Улучшения next/image

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

Оптимизация изображений

По умолчанию Next.js использует WebAssembly для оптимизации изображений, что компенсирует время установки пакета Next.js, будучи значительно меньше и не имея шага post-install. С Next.js 11.1 вы можете опционально установить sharp, который оптимизирует время генерации изображений без кеша за счет более медленной установки.

Оптимизатор изображений на основе WebAssembly был обновлен для поддержки ARM-чипов, таких как Apple M1, с Node.js 16.

Встроенный оптимизатор изображений теперь автоматически определяет тип контента внешнего изображения на основе содержимого тела ответа. Это позволяет Next.js оптимизировать изображения, размещенные на AWS S3, когда заголовок ответа Content-Type: application/octet-stream.

Ленивая генерация размытых плейсхолдеров в разработке

Во время next dev статический импорт изображений с placeholder="blur" теперь автоматически генерируется лениво, улучшая время запуска dev-сервера для приложений с большим количеством статических изображений:

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // Плейсхолдер для этого изображения лениво генерируется во время разработки
    <Image src={author} alt="Picture of the author" placeholder="blur" />
  );
}

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

• Изображения, которые уже были загружены, больше не лениво загружаются: Когда изображение было загружено на странице ранее, либо через клиентскую навигацию, либо загружаясь в другом месте страницы, Next.js теперь автоматически пропускает ленивую загрузку, чтобы избежать быстрого мерцания перед показом изображения.
• Поддержка пользовательских загрузчиков изображений с next export: next/image теперь поддерживает использование next export вместе с любым сервисом оптимизации изображений третьих сторон. Вы можете настроить images.loader: "custom" в next.config.js, когда собираетесь предоставить пользовательский пропс loader для next/image.
• Новое событие для завершения загрузки изображений: На основе отзывов пользователей мы добавили новое свойство onLoadingComplete в next/image. Это позволяет зарегистрировать обратный вызов, который вызывается после полной загрузки изображения.
• Настройка TTL (Time to Live) кеша изображений по умолчанию: Теперь вы можете настроить images.minimumCacheTTL в next.config.js, чтобы изменить TTL кеша по умолчанию для оптимизированных изображений. По возможности мы рекомендуем использовать статический импорт изображений, так как они автоматически используют максимальный TTL, потому что хэш содержимого изображения находится в URL.

Сообщество

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

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

Этот релиз стал возможным благодаря вкладу: @abotsi, @adam-cowley, @afbarbaro, @akellbl4, @AndreVarandas, @andys-github, @angeloashmore, @apuyou, @arturmuller, @AryanBeezadhur, @atcastle, @borekb, @brandonchinn178, @breyed, @brijendravarma, @ctbarna, @ctjlewis, @darshkpatel, @delbaoliveira, @destruc7i0n, @devknoll, @enesakar, @enzoferey, @euess, @fabb, @gnbaron, @hiro0218, @housseindjirdeh, @huozhi, @ijjk, @JacobLey, @jameshoward, @jamsinclair, @janicklas-ralph, @jarvelov, @javivelasco, @jaybekster, @JeffersonBledsoe, @jflayhart, @johnrackles, @jviide, @karlsander, @kasipavankumar, @kaykdm, @kdy1, @kylemh, @leerob, @LetItRock, @lsndr, @lucleray, @m-abdelwahab, @mandarons, @markkaylor, @mastoj, @michalbundyra, @michielvangendt, @Munawwar, @mvasilkov, @NickCrews, @NickKelly1, @noahweingand, @noreiller, @nyedidikeke, @omasher, @orta, @pa-rang, @padmaia, @papaponmx, @PaulvdDool, @petermekhaeil, @phocks, @pranavp10, @qwertyforce, @raon0211, @reod, @rishabhpoddar, @roim, @Ryz0nd, @sa3dany, @sachinraja, @samrobbins85, @schoenwaldnils, @schultzp2020, @sedlukha, @sergioalvz, @shibe23, @smitssjors, @sohamsshah, @sokra, @stefanprobst, @stovmascript, @stuymedova, @styfle, @tanys123, @ThangHuuVu, @theostrahlen, @thomasmarshall, @tigger9flow, @timneutkens, @Timvdv, @tmcgann, @tomchen, @UniqueNL, @Vadorequest, @vitalybaev, @yunger7, @zackdotcomputer, @zeekrey