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

Next.js 15.3

В Next.js 15.3 добавлена поддержка Turbopack для сборок, новые хуки для клиентской инструментации и навигации, а также другие улучшения.

Next.js 15.3 включает Turbopack для сборок, новые хуки для клиентской инструментации и навигации, а также другие улучшения:

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

Terminal
# Используйте автоматизированный CLI для обновления
npx @next/codemod@canary upgrade latest
 
# ...или обновите вручную
npm install next@latest react@latest react-dom@latest
 
# ...или создайте новый проект
npx create-next-app@latest

Turbopack для сборок (альфа)

После стабильного релиза next dev --turbopack, более 50% сессий разработки в Next.js 15 теперь используют Turbopack.

Этот релиз включает альфа-версию next build --turbopack, привносящую те же улучшения производительности из локальной разработки в production-сборки.

Попробуйте Turbopack для production-сборок, обновившись до 15.3 и выполнив:

Terminal
next build --turbopack

Функциональность

99.3% интеграционных тестов для next build уже проходят. Вы можете отслеживать наш прогресс на areweturboyet.com. Если ваше приложение уже работает с Turbopack в dev, то оно должно работать и с build.

Сборки Turbopack находятся в альфа-стадии. Мы не рекомендуем использовать их в production для критически важных приложений на этом этапе. Вместо этого попробуйте их в preview или staging среде, или запустите сборку локально, чтобы наблюдать различия в размере бандла и производительности.

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

Производительность сборки

Мы тестировали Turbopack на большом внутреннем монорепозитории Vercel и ранних кодовых базах партнеров. Одно из преимуществ архитектуры Turbopack по сравнению с нашей предыдущей реализацией Webpack — производительность масштабируется при добавлении CPU-ядер:

  • На 4 ядрах: на 28% быстрее Webpack
  • На 16 ядрах: на 60% быстрее Webpack
  • На 30 ядрах: на 83% быстрее Webpack

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

Экосистема

Мы работаем с популярными интеграциями, такими как Sentry, чтобы обеспечить их совместимость с next build --turbopack до стабильного релиза. Пожалуйста, свяжитесь с @leerob в X, если вы разработчик инструмента и хотите работать с нами для обеспечения совместимости.

Обратная связь

Пожалуйста, делитесь вашими отзывами, даже если все прошло гладко, чтобы помочь нам подготовить стабильный релиз:

Конфигурация Turbopack в next.config.ts (стабильная)

Конфигурация Turbopack в next.config.ts перемещена из experimental.turbo на верхний уровень ключа turbopack:

next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};
 
export default nextConfig;

Для совместимости опция experimental.turbo будет поддерживаться до следующего мажорного релиза Next.js.

Полный список опций конфигурации Turbopack см. в Справочнике API Turbopack.

Поддержка Rspack от сообщества (экспериментальная)

Команда Rspack создала плагин сообщества для Next.js.

Это предоставляет вариант для пользователей Next.js, которым нужна почти полная совместимость с API Webpack, но которые пока не могут перейти на Turbopack, чтобы улучшить время локальной компиляции и сборки. Мы уверены в нашем прогрессе с Turbopack и продолжим предоставлять постепенный путь для пользователей Webpack.

Хотя это не официальный плагин Next.js, мы сотрудничаем с командой Rspack. Обе команды будут работать над общими основами, такими как SWC и Lightning CSS, что принесет пользу всем пользователям Next.js и более широкой экосистеме.

Если вы хотите попробовать Rspack с Next.js, вы можете использовать адаптер next-rspack. Мы запускаем адаптер против нашего набора интеграционных тестов. В настоящее время он проходит ~96% тестов.

Посмотреть пример или узнать больше в документации Rspack.

Хук Client Instrumentation

Файл instrumentation-client.js|ts позволяет добавить код мониторинга и аналитики, который выполняется до запуска фронтенд-кода вашего приложения.

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

instrumentation-client.js
// Настройка мониторинга производительности
performance.mark('app-init');
 
// Инициализация аналитики
console.log('Analytics initialized');
 
// Настройка отслеживания ошибок
window.addEventListener('error', (event) => {
  // Отправка в сервис отслеживания ошибок
  reportError(event.error);
});

Разместите этот файл в корне вашего проекта, аналогично инструментации на стороне сервера.

Подробнее см. в документации по файлу instrumentation-client.

Хуки навигации

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

onNavigate

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

В отличие от события onClick, которое срабатывает для всех кликов, onNavigate можно использовать для Single-Page App (SPA) навигаций, позволяя выполнять код или даже отменять навигацию с помощью preventDefault().

Этот API можно использовать для реализации анимаций переходов, навигационных ограничений или отслеживания аналитики, которые должны выполняться только во время фактических переходов между страницами.

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

useLinkStatus

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

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

Разместив компонент, использующий useLinkStatus, как потомок вашего компонента <Link>, вы можете создавать отзывчивые UI-элементы, которые реагируют на события навигации в реальном времени.

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

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

Плагин TypeScript language server (LSP) для Next.js теперь работает быстрее.

LSP предоставляет встроенные функции Intellisense, такие как валидация границ сервер/клиент, подсказки пропсов компонентов, автодополнение конфигурации и обнаружение ошибок для запрещенных API в React Server Components. В очень больших кодовых базах плагин ранее мог вызывать зависание или краш сервиса TypeScript.

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

Другие изменения

  • [Функция] Поддержка new URL() в images.remotePatterns (#77692)
  • [Функция] Опции viewport теперь отделены от metadata (#77427)
  • [Функция] Добавлена опция unstable_dynamicOnHover (#77866)
  • [Функция] Добавлена поддержка Pinterest Rich Pins (#76988)
  • [Улучшение] revalidate теперь работает при последующем редиректе в Route Handlers (#77090)
  • [Улучшение] Обеспечена строгая консистентность после вызова revalidate в Server Actions (#76885)
  • [Улучшение] Обновление sharp для более быстрого преобразования PNG в AVIF (#77839)

Участники

Next.js — результат совместной работы более 3000 разработчиков. Этот релиз стал возможен благодаря:

Огромная благодарность @raunofreiberg, @huozhi, @ijjk, @timneutkens, @gaojude, @leerob, @mezotv, @bgw, @samcx, @ztanner, @sokra, @mischnic, @wbinnssmith, @kdy1, @unstubbable, @ahabhgk, @ScriptedAlchemy, @SukkaW, @wyattjoh, @eps1lon, @Amirroid, @Netail, @lubieowoce, @gnoff, @jackwilson323, @acdlite, @sbougerel, @kevva, @kasperpeulen, @Cy-Tek, @dvoytenko, @husseinraoouf, @isBatak, @iamkd, @delbaoliveira, @jantimon, @padmaia, @Bernardoow, @styfle, @devjiwonchoi, @JamBalaya56562, и @Marukome0743 за помощь!