Next.js 13.5

Next.js 13.5 улучшает производительность и надежность локальной разработки:

• На 22% быстрее запуск локального сервера: Быстрее итерируйте с App & Pages Router
• На 29% быстрее HMR (Fast Refresh): Для ускорения итераций при сохранении изменений
• На 40% меньше использование памяти: Измерено при запуске next start
• Оптимизированные импорты пакетов: Быстрее обновления при использовании популярных библиотек иконок и компонентов
• Улучшения next/image: Поддержка <picture>, арт-дирекшена и темного режима
• И исправлено более 438 багов!

Обновитесь сегодня и зарегистрируйтесь на Next.js Conf 26 октября:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Улучшение времени запуска и Fast Refresh

Мы рады видеть растущее внедрение App Router, которое увеличивается на 80% в месяц согласно данным HTTP Archive для топ-10 миллионов сайтов.

С момента выхода Next.js 13.4 мы сосредоточились на улучшении производительности и надежности приложений с App Router. Сравнивая 13.4 и 13.5, мы наблюдаем следующие улучшения в новом приложении:

• На 22% быстрее запуск локального сервера
• На 29% быстрее HMR (Fast Refresh)
• На 40% меньше использование памяти

Эти улучшения стали возможны благодаря оптимизациям:

• Уменьшение объема работы за счет кэширования или минимизации медленных операций
• Оптимизация дорогих операций файловой системы
• Улучшенный инкрементальный обход дерева при компиляции
• Перенос ненужных синхронных вызовов в ленивые
• Автоматическая настройка больших библиотек иконок

Пользователь Next.js Lattice сообщил об ускорении компиляции на 87-92% в своих тестах.

Продолжая улучшать текущую производительность сборщика, мы параллельно работаем над Turbopack (Beta) для дальнейшего повышения скорости. В 13.5 next dev --turbo поддерживает больше функций.

Оптимизированные импорты пакетов

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

Ранее мы добавили поддержку modularizeImports, позволяя настраивать разрешение импортов для таких библиотек. В 13.5 мы заменили эту опцию на optimizePackageImports, которая не требует указания маппинга импортов, а автоматически оптимизирует их за вас.

Библиотеки, такие как @mui/icons-material, @mui/material, date-fns, lodash, lodash-es, ramda, react-bootstrap, @headlessui/react, @heroicons/react и lucide-react, теперь автоматически оптимизируются, загружая только используемые модули, сохраняя удобство написания import с множеством именованных экспортов.

См. PR или узнайте больше о optimizePackageImports в нашей документации.

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

На основе отзывов сообщества мы добавили новую экспериментальную функцию unstable_getImgProps() для поддержки сложных сценариев без прямого использования компонента <Image>, включая:

• Работу с background-image или image-set
• Работу с canvas context.drawImage() или new Image()
• Работу с <picture> медиазапросами для реализации Арт-дирекшена или изображений для светлого/темного режима

import { unstable_getImgProps as getImgProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImgProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImgProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

Кроме того, проп placeholder теперь поддерживает произвольные data:image/ для изображений-заполнителей, которые не должны размываться (демо).

Узнайте больше о next/image в нашей документации.

Другие улучшения

С версии 13.4.0 мы исправили более 438 багов и внесли различные улучшения:

• [Документация] Новая документация по Формам и Мутациям
• [Документация] Новая документация по Серверным и Клиентским Компонентам
• [Документация] Новая документация по Политике Безопасности Контента и Nonce
• [Документация] Новая документация по Кэшированию и Ревалидации
• [Функция] useParams и useSearchParams из next/navigation теперь работают в Pages Router для постепенного внедрения
• [Функция] Поддержка scroll: false в router.push / router.replace
• [Функция] Поддержка scroll={false} в next/link
• [Функция] Поддержка HTTPS для разработки: next dev --experimental-https
• [Функция] Добавлена поддержка cookies().has() (Документация)
• [Функция] Добавлена поддержка IPv6-хостов
• [Функция] Добавлена поддержка Yarn PnP с App Router
• [Функция] Добавлена поддержка redirect() в Server Actions
• [Функция] Добавлена поддержка Bun при создании проектов: bunx create-next-app (Документация)
• [Функция] Поддержка Draft Mode в Middleware и Edge Runtime
• [Функция] cookies() и headers() теперь поддерживаются в Middleware
• [Функция] Metadata API теперь поддерживает summary_large_image в Twitter-карточках
• [Функция] RedirectType теперь экспортируется из next/navigation
• [Функция] Добавлен экспериментальный тестовый режим для Playwright (Документация)
• [Улучшение] Рефакторинг next start для обработки на 1062% больше запросов в секунду
• [Улучшение] Оптимизация внутренних механизмов Next.js для ускорения холодного старта (до 40% быстрее, тестировалось на Vercel)
• [Улучшение] Лучшая поддержка Jest для App Router (PR)
• [Улучшение] Переработан вывод next dev (PR)
• [Улучшение] Server Actions теперь работают с полностью статическими маршрутами (включая ревалидацию данных с ISR)
• [Улучшение] Server Actions больше не блокируют навигацию между маршрутами
• [Улучшение] Server Actions больше не могут запускать несколько параллельных действий
• [Улучшение] Server Actions с redirect() теперь добавляют запись в историю вместо замены текущей, чтобы работала кнопка "Назад"
• [Улучшение] Server Actions добавляют заголовок cache-control no-cache, no-store для предотвращения кэширования браузером
• [Улучшение] Исправлен баг, из-за которого Server Actions могли вызываться дважды после навигации
• [Улучшение] Улучшена поддержка Emotion CSS с Server Components
• [Улучшение] Поддержка scroll-behavior: smooth для изменений хэш-URL
• [Улучшение] Добавлен полифилл для Array.prototype.at во всех браузерах
• [Улучшение] Исправлено состояние гонки в кэше next dev при обработке параллельных запросов
• [Улучшение] Вывод fetch в консоли теперь показывает запросы, пропустившие кэш с cache: SKIP
• [Улучшение] usePathname теперь корректно удаляет basePath
• [Улучшение] next/image теперь корректно предзагружает изображения в App Router
• [Улучшение] not-found больше не рендерит корневой лэйаут дважды
• [Улучшение] NextRequest теперь можно клонировать (например new NextRequest(request))
• [Улучшение] app/children/page.tsx теперь корректно работает для буквальных маршрутов /children
• [Улучшение] Политика Безопасности Контента теперь поддерживает nonce для предварительно инициализированных скриптов
• [Улучшение] Использование redirect из next/navigation теперь поддерживает basePath
• [Улучшение] Исправлена недоступность process.env при рендеринге в режиме output: 'standalone'
• [Улучшение] Улучшено сообщение об ошибке при использовании Статического Экспорта с неподдерживаемыми функциями
• [Улучшение] Улучшена реализация рекурсивного readdir (~в 3 раза быстрее)
• [Улучшение] Исправлена проблема, когда fallback: false с динамическими сегментами маршрута мог вызывать зависание запросов
• [Улучшение] Исправлена ошибка, когда signal передавался в запросы ревалидации, вызывая их сбой при уже прерванном запросе
• [Улучшение] Удален опрос fetch на 404 странице в пользу событий websocket, предотвращая ненужные перезагрузки при next dev
• [Улучшение] performance.measure больше не может вызывать несоответствие гидратации
• [Улучшение] Исправлены случаи, когда неожиданная полная перезагрузка могла происходить при редактировании pages/_app
• [Улучшение] ImageResponse теперь расширяет Response для улучшенной проверки типов (PR)
• [Улучшение] pages больше не отображается, если нет вывода pages в next build
• [Улучшение] Исправлено игнорирование skipTrailingSlashRedirect в <Link>
• [Улучшение] Исправлено дублирование динамических маршрутов метаданных в режиме разработки

Участники

Next.js — результат совместной работы более 2800 разработчиков, индустриальных партнеров, таких как Google и Meta, и нашей основной команды в Vercel. Присоединяйтесь к сообществу на GitHub Discussions, Reddit и Discord.

Этот релиз стал возможен благодаря:

• Команде Next.js: Andrew, Balazs, Jiachi, Jimmy, JJ, Josh, Sebastian, Shu, Steven, Tim, Wyatt, и Zack.
• Команде Turbopack: Donny, Justin, Leah, Maia, OJ, Tobias, и Will.

А также вкладам: @opnay, @vinaykulk621, @goguda, @coreyleelarson, @bencmbrook, @cramforce, @williamli, @stefanprobst, @feugy, @Kikobeats, @dvoytenko, @MaxLeiter, @devjiwonchoi, @lacymorrow, @kylemcd, @tibi1220, @iamarpitpatidar, @pythagoras-yamamoto, @alexkirsz, @jsteele-stripe, @tknickman, @gaojude, @janicklas-ralph, @ericfennis, @JohnAdib, @MiLk, @delbaoliveira, @leerob, @LuudJanssen, @lucasconstantino, @davecarlson, @colinhacks, @jantimon, @Banbarashik, @ForsakenHarmony, @arturbien, @gnoff, @hsrvms, @DuCanhGH, @tim-hanssen, @Aryan9592, @rishabhpoddar, @Lantianyou, @joulev, @AkifumiSato, @trigaten, @HurSungYun, @DevLab2425, @SukkaW, @daniel-web-developer, @ky1ejs, @wyattjoh, @ShaunFerris, @syedtaqi95, @Heidar-An, @Jeffrey-Zutt, @Ryan-Dia, @steppefox, @hiro0218, @rjsdnql123, @fgiuliani, @steven-tey, @AntoineBourin, @adamrhunter, @darshanjain-entrepreneur, @s0h311, @djreillo, @dijonmusters, @cassidoo, @anonrig, @gfgabrielfranca, @Bitbbot, @BrennanColberg, @Nick-Mazuk, @thomasballinger, @lucgagan, @nroland013, @SonMooSans, @jenewland1999, @thorwebdev, @jyunhanlin, @Gnadhi, @yagogmaisp, @carlos-menezes, @ryo-manba, @vamcs, @matepapp, @SleeplessOne1917, @ecklf, @karlhorky, @starunaway, @FernandVEYRIER, @Terro216, @anthonyshew, @suhaotian, @simonswiss, @feikerwu, @lubakravche, @masnormen, @bottxiang, @mhmdrioaf, @tyler-lutz, @vincenthongzy, @yigithanyucedag, @doinki, @danger-ahead, @bre30kra69cs, @Yash-Singh1, @krmeda, @bigyanse, @2-NOW, @Mingyu-Song, @morganfeeney, @aralroca, @nickmccurdy, @adamjmcgrath, @angel1254mc, @cxa, @ibash, @mohanraj-r, @kevinmitch14, @iaurg, @steebchen, @Cow258, @charlesbdudley, @tyhopp, @Drblessing, @milovangudelj, @jacobsfletch, @JoshuaKGoldberg, @zignis, @ChristianIvicevic, @mrxbox98, @oliviertassinari, @fsansalvadore, @tvthatsme, @dvakatsiienko, @brunoeduardodev, @sonam-serchan, @vicsantizo, @leodr, @wiscaksono, @hustLer2k, @joshuabaker, @shozibabbas, @omarhoumz, @jamespearson, @tristndev, @AldeonMoriak, @manovotny, @mirismaili, @SuttonJack, @jeremydouglas, @JanCizmar, @mltsy, @WilderDev, @Guilleo03, @Willem-Jaap, @escwxyz, @wiredacorn, @Ethan-Arrowood, @BaffinLee, @greatSumini, @ciruz, @kijikunnn, @DustinsCode, @riqwan, @joostdecock, @nikolovlazar, @Bowens20832, @JohnAlbin, @gidgudgod, @maxproske, @dunklesToast, @yyuemii, @mPaella, @mknichel, @niko20, @mkcy3, @valentinpolitov, @smaeda-ks, @keyz, @Schniz, @koba04, @jiwooIncludeJeong, @ethanmick, @didemkkaslan, @itsmingjie, @v1k1, @thepatrick00, @taylorbryant, @kvnang, @alainkaiser, @simPod, @svarunid, @pauek, @lycuid, @MarkAtOmniux, @darshkpatel, @johnta0, @devagrawal09, @ibrahemid, @JesseKoldewijn, @javivelasco, @05lazy, @alexanderbluhm, @Fonger, @souporserious, @DevEsteves, @sanjaiyan-dev, @g12i, @cesarkohl, @josh, @li-jia-nan, @gabschne, @akd-io, @runjuu, @jocarrd, @nnnnoel, @ferdingler, и @ikryvorotenko