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

Next.js 14.2

В Next.js 14.2 представлены улучшения для разработки, производства и кэширования. Включая новые опции конфигурации, 99% прохождения тестов Turbopack и другие улучшения.

Next.js 14.2 включает улучшения для разработки, производства и кэширования.

Обновитесь сегодня или начните с:

Terminal
npx create-next-app@latest

Turbopack для разработки (Release Candidate)

В течение последних месяцев мы работали над улучшением производительности локальной разработки с Turbopack. В версии 14.2 Release Candidate Turbopack теперь доступен для локальной разработки:

  • 99.8% интеграционных тестов теперь проходят успешно.
  • Мы проверили, что топ-300 пакетов npm, используемых в приложениях Next.js, могут компилироваться с Turbopack.
  • Все примеры Next.js работают с Turbopack.
  • Мы интегрировали Lightning CSS, быстрый CSS-бандлер и минификатор, написанный на Rust.

Мы активно тестировали Turbopack на приложениях Vercel. Например, для vercel.com, крупного приложения Next.js, мы наблюдали:

  • До 76.7% быстрее запуск локального сервера.
  • До 96.3% быстрее обновления кода с Fast Refresh.
  • До 45.8% быстрее компиляция начального маршрута без кэширования (Turbopack пока не имеет кэширования на диске).

Turbopack остаётся опциональным, и вы можете попробовать его с помощью:

Terminal
next dev --turbo

Теперь мы сосредоточимся на улучшении использования памяти, реализации постоянного кэширования и next build --turbo.

  • Использование памяти - Мы создали низкоуровневые инструменты для анализа использования памяти. Теперь вы можете генерировать трассировки, которые включают как метрики производительности, так и общую информацию об использовании памяти. Эти трассировки позволяют нам анализировать производительность и использование памяти без доступа к исходному коду вашего приложения.
  • Постоянное кэширование - Мы также исследуем лучшие архитектурные решения и планируем поделиться подробностями в будущих релизах.
  • next build - Хотя Turbopack пока недоступен для сборки, 74.7% тестов уже проходят. Вы можете следить за прогрессом на areweturboyet.com/build.

Список поддерживаемых и неподдерживаемых функций в Turbopack доступен в нашей документации.

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

Помимо улучшений бандлинга с Turbopack, мы работали над улучшением общей производительности сборки и производства для всех приложений Next.js (как Pages, так и App Router).

Tree-shaking

Мы обнаружили оптимизацию для границы между Server и Client Components, которая позволяет удалять неиспользуемые экспорты. Например, импорт одного компонента Icon из файла с "use client" больше не включает все остальные иконки из этого пакета. Это может значительно уменьшить размер production-бандла JavaScript.

Тестирование этой оптимизации на популярной библиотеке react-aria-components уменьшило итоговый размер бандла на 51.3%.

Примечание: Эта оптимизация пока не работает с barrel-файлами. Временно вы можете использовать опцию конфигурации optimizePackageImports:

next.config.ts
module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
};

Использование памяти при сборке

Для очень крупных приложений Next.js мы заметили сбои из-за нехватки памяти (OOM) во время production-сборки. После анализа отчётов пользователей мы выяснили, что причиной было избыточное бандлинг и минификация (Next.js создавал меньше, но более крупных файлов JavaScript с дублированием). Мы переработали логику бандлинга и оптимизировали компилятор для таких случаев.

Наши тесты показывают, что на минимальном приложении Next.js использование памяти и размер кэш-файлов уменьшились с 2.2GB до менее 190MB в среднем.

Для упрощения отладки использования памяти мы добавили флаг --experimental-debug-memory-usage к next build. Подробнее в документации.

CSS

Мы обновили оптимизацию CSS во время production-сборки Next.js, разбивая CSS на чанки, чтобы избежать конфликтов стилей при навигации между страницами.

Порядок и объединение CSS-чанков теперь определяется порядком импорта. Например, base-button.module.css будет обработан раньше page.module.css:

base-button.tsx
import styles from './base-button.module.css';
 
export function BaseButton() {
  return <button className={styles.primary} />;
}
page.tsx
import { BaseButton } from './base-button';
import styles from './page.module.css';
 
export function Page() {
  return <BaseButton className={styles.primary} />;
}

Для сохранения правильного порядка CSS мы рекомендуем:

  • Использовать CSS Modules вместо глобальных стилей.
  • Импортировать CSS Module только в одном JS/TS файле.
  • При использовании глобальных классов импортировать глобальные стили в том же JS/TS файле.

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

Улучшения кэширования

Кэширование — критически важная часть создания быстрых и надёжных веб-приложений. При выполнении мутаций и пользователи, и разработчики ожидают обновления кэша для отражения последних изменений. Мы исследовали способы улучшения работы с кэшированием в App Router.

staleTimes (Экспериментальная)

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

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

По умолчанию префетченные маршруты (с использованием компонента <Link> без пропса prefetch) кэшируются на 30 секунд, а с prefetch={true} — на 5 минут. Вы можете переопределить эти значения, задав времена ревалидации в next.config.js:

next.config.ts
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
 
module.exports = nextConfig;

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

Подробнее о staleTimes в документации.

Параллельные и перехватывающие маршруты (Parallel and Intercepting Routes)

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

  • Параллельные и перехватывающие маршруты, вызывающие Серверные действия (Server Actions) с revalidatePath или revalidateTag, теперь будут обновлять кеш и обновлять видимые слоты, сохраняя текущий вид пользователя.
  • Аналогично, вызов router.refresh теперь корректно обновляет видимые слоты, сохраняя текущий вид.

Улучшения обработки ошибок (Errors DX Improvements)

В версии 14.1 мы начали работу над улучшением читаемости сообщений об ошибках и трассировки стека при запуске next dev. Эта работа продолжилась в версии 14.2 и теперь включает улучшенные сообщения об ошибках, улучшенный дизайн оверлеев для App Router и Pages Router, поддержку светлой и темной темы, а также более четкие логи dev и build.

Например, ошибки гидратации React часто вызывают путаницу в нашем сообществе. Хотя мы внесли улучшения, чтобы помочь пользователям находить источник несоответствий гидратации (см. ниже), мы работаем с командой React над улучшением базовых сообщений об ошибках и отображением имени файла, в котором произошла ошибка.

До:

Пример оверлея ошибок Next.js до версии 14.2.

Пример оверлея ошибок Next.js до версии 14.2.

После:

Пример оверлея ошибок Next.js после версии 14.2.

Пример оверлея ошибок Next.js после версии 14.2.

React 19

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

Новые функции, такие как Actions и связанные с ними хуки, которые были доступны в Next.js через канареечный канал React (React canary channel), теперь будут доступны для всех React-приложений (включая клиентские приложения). Мы рады видеть более широкое распространение этих функций в экосистеме React.

Другие улучшения (Other Improvements)

  • [Документация] Новая документация по оптимизации видео (PR).
  • [Документация] Новая документация по instrumentation.ts (PR)
  • [Функция] Новый пропс overrideSrc для next/image (PR).
  • [Функция] Новый аргумент revalidateReason для getStaticProps (PR).
  • [Улучшение] Рефакторинг логики стриминга, сокращение времени стриминга страниц в продакшене (PR).
  • [Улучшение] Поддержка вложенных Серверных действий (Server Actions) (PR).
  • [Улучшение] Поддержка локализации в генерируемых Sitemaps (PR).
  • [Улучшение] Визуальные улучшения логов dev и build (PR)
  • [Улучшение] Защита от перекосов (Skew protection) стабильна на Vercel (Документация).
  • [Улучшение] Совместимость useSelectedLayoutSegment с Pages Router (PR).
  • [Улучшение] Пропуск предупреждений metadataBase, когда абсолютные URL не требуют разрешения (PR).
  • [Улучшение] Исправление проблемы, когда Серверные действия (Server Actions) не отправлялись при отключенном JavaScript на Vercel (PR)
  • [Улучшение] Исправление ошибки о не найденной Серверной действии (Server Action) в манифесте действий, если она была вызвана после перехода со страницы или использовалась внутри неактивного параллельного маршрута (PR)
  • [Улучшение] Исправление импортов CSS в компонентах, загружаемых через next/dynamic (PR).
  • [Улучшение] Предупреждение, если анимированное изображение не имеет пропса unoptimized (PR).
  • [Улучшение] Отображение сообщения об ошибке, если images.loaderFile не экспортирует функцию по умолчанию (PR)

Сообщество (Community)

Next.js теперь насчитывает более 1 миллиона активных разработчиков в месяц. Мы благодарны за поддержку и вклад сообщества. Присоединяйтесь к обсуждению на GitHub Discussions, Reddit и Discord.

Участники (Contributors)

Next.js — это результат совместной работы более 3000 отдельных разработчиков, отраслевых партнеров, таких как Google и Meta, и нашей основной команды в Vercel. Этот релиз стал возможным благодаря:

Огромная благодарность @taishikato, @JesseKoldewijn, @Evavic44, @feugy, @liamlaverty, @dvoytenko, @SukkaW, @wbinnssmith, @rishabhpoddar, @better-salmon, @ziyafenn, @A7med3bdulBaset, @jasonuc, @yossydev, @Prachi-meon, @InfiniteCodeMonkeys, @ForsakenHarmony, @miketimmerman, @kwonoj, @williamli, @gnoff, @jsteele-stripe, @chungweileong94, @WITS, @sogoagain, @junioryono, @eisafaqiri, @yannbolliger, @aramikuto, @rocketman-21, @kenji-webdev, @michaelpeterswa, @Dannymx, @vpaflah, @zeevo, @chrisweb, @stefangeneralao, @tknickman, @Kikobeats, @ubinatus, @code-haseeb, @hmmChase, @byhow, @DanielRivers, @wojtekmaj, @paramoshkinandrew, @OMikkel, @theitaliandev, @oliviertassinari, @Ishaan2053, @Sandeep-Mani, @alyahmedaly, @Lezzio, @devjiwonchoi, @juliusmarminge, @szmazhr, @eddiejaoude, @itz-Me-Pj, @AndersDJohnson, @gentamura, @tills13, @dijonmusters, @SaiGanesh21, @vordgi, @ryota-murakami, @tszhong0411, @officialrajdeepsingh, @alexpuertasr, @AkifumiSato, @Jonas-PFX, @icyJoseph, @florian-lp, @pbzona, @erfanium, @remcohaszing, @bernardobelchior, @willashe, @kevinmitch14, @smakosh, @mnjongerius, @asobirov, @theoholl, @suu3, @ArianHamdi, @adrianha, @Sina-Abf, @kuzeykose, @meenie, @nphmuller, @javivelasco, @belgattitude, @Svetoslav99, @johnslemmer, @colbyfayock, @mehranmf31, @m-nakamura145, @ryo8000, @aryaemami59, @bestlyg, @jinsoul75, @petrovmiroslav, @nattui, @zhuyedev, @dongwonnn, @nhducit, @flotwig, @Schmavery, @abhinaypandey02, @rvetere, @coffeecupjapan, @cjimmy, @Soheiljafarnejad, @jantimon, @zengspr, @wesbos, @neomad1337, @MaxLeiter и @devr77 за помощь!