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

Next.js 15.2

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

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

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

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

Переработанный интерфейс ошибок и улучшенные стектрейсы

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

Оверлей ошибок

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

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

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

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

Пример настроек инструментов разработчика в Next.js

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

Индикатор разработки

Различные состояния индикатора разработки — от рендеринга до отображения дополнительной информации.

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

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

Открытие индикатора разработки теперь отображает:

  • Режим рендеринга текущего маршрута (статический/динамический)
  • Статус компиляции Turbopack
  • Активные ошибки с быстрым доступом к оверлею ошибок

В будущих обновлениях это меню будет расширено и включит:

  • Инструменты отладки PPR (Partial Prerendering)
  • Функции мониторинга кэша
  • Дополнительные инструменты для разработчиков

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

Стриминг метаданных

Часто бывает необходимо получить динамические данные или выполнить асинхронную операцию в generateMetadata. В предыдущих версиях Next.js эти метаданные должны были завершить генерацию до отправки начального UI, чтобы их можно было включить в документ <head>.

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

Пример настроек инструментов разработчика в Next.js

Однако для сохранения совместимости с ботами и краулерами, которые ожидают наличия метаданных в <head> документа, мы продолжаем задерживать отправку HTML для определенных пользовательских агентов ботов. Если вам нужен более детальный контроль над тем, какие боты получают такое обращение, вы можете настроить регулярное выражение для их обработки с помощью опции htmlLimitedBots в next.config.js.

Узнайте больше о стриминге метаданных.

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

Turbopack был объявлен стабильным в Next.js 15.

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

  • Более быстрая компиляция: Ранние пользователи сообщают о 57.6% ускорении времени компиляции при доступе к маршрутам по сравнению с Next.js 15.1.
  • Снижение потребления памяти: Для приложения vercel.com мы наблюдали 30% снижение использования памяти во время локальной разработки.

С этими улучшениями Turbopack теперь должен быть быстрее Webpack практически во всех случаях. Если вы столкнулись с ситуацией, когда это не так для вашего приложения, пожалуйста, сообщите нам — мы хотим изучить такие случаи.

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

React View Transitions (экспериментально)

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

Чтобы включить эту функцию, добавьте следующее в ваш next.config.js:

next.config.js
module.exports = {
  experimental: {
    viewTransition: true,
  },
};

Примечание: Эта функция является экспериментальной и может измениться в будущих релизах.

Для получения дополнительной информации о том, как использовать эту функцию, обратитесь к оригинальному pull request View Transition в репозитории React. Эта работа основана на нативной реализации View Transitions в браузере.

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

Node.js Middleware (экспериментально)

Мы работали над новым экспериментальным флагом, позволяющим использовать Node.js рантайм для Next.js Middleware.

Чтобы включить эту функцию, добавьте следующее в ваш next.config.js:

next.config.js
module.exports = {
  experimental: {
    nodeMiddleware: true,
  },
};

Затем вы можете указать Node.js рантайм в экспорте config вашего Middleware:

middleware.js
import bcrypt from 'bcrypt';
 
const API_KEY_HASH = process.env.API_KEY_HASH; // Предварительно хешированный API-ключ в env
 
export default async function middleware(req) {
  const apiKey = req.headers.get('x-api-key');
 
  if (!apiKey || !(await bcrypt.compare(apiKey, API_KEY_HASH))) {
    return new Response('Forbidden', { status: 403 });
  }
 
  console.log('API key validated');
}
 
export const config = {
  runtime: 'nodejs',
};

Примечание: Эта функция еще не рекомендуется для использования в production. Поэтому Next.js будет выдавать ошибку, если вы не используете релиз next@canary вместо стабильного.

Мы планируем воспользоваться этой возможностью, чтобы улучшить и переработать API Middleware. Если у вас есть предложения или запросы, пожалуйста, сообщите нам. Node.js Middleware был одним из главных запросов сообщества, и мы рады, что смогли его реализовать.

Скоро

  • "use cache" (бета): Мы работаем над стабилизацией "use cache" как самостоятельной функции. Следите за новостями в следующих релизах. Узнайте больше о "use cache".
  • Постоянное кэширование Turbopack (экспериментально): Мы тестируем постоянное кэширование в Vercel с положительными результатами по производительности. Как только мы стабилизируем его дальше, мы выпустим его за флагом для дополнительных отзывов и тестирования.

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

  • [Функция] Добавлен флаг --api для создания API-only проекта с create-next-app (PR)
  • [Функция] Добавлена поддержка images.qualities для next/image (PR)
  • [Устаревание] Предупреждение об устаревании конфигурации i18n в App Router (PR)
  • [Улучшение] Улучшена производительность линтера no-html-link-for-pages (PR)
  • [Улучшение] Вывод ошибки сборки при неправильном использовании директивы "use action" (PR)
  • [Улучшение] Отображение global-error вместе с оверлеем разработки (PR)
  • [Улучшение] Возможность отключения логов HTTP-запросов в сервере разработки (PR)
  • [Улучшение] Добавлены SEO-теги ссылок для пагинации (PR)
  • [Улучшение] Улучшена JSDocs для metadata и компонентов <Link> (PR)
  • [Улучшение] Middleware должен обрабатывать запросы next/image (PR)
  • [Улучшение] Добавлено имя хоста в сообщение границы ошибки по умолчанию (PR)
  • [Улучшение] Отправка ошибок, не обработанных явными границами ошибок, через reportError (PR)

Участники

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

Огромная благодарность @mischnic, @Marukome0743, @JamBalaya56562, @creationix, @noreiller, @styfle, @abdonrd, @ollyw, @aymericzip, @davidhu2000, @attilarepka, @devpla, @dydals3440, @huozhi, @wbinnssmith, @suu3, @PapatMayuri, @Sahil4883, @abyii, @molebox, @sokra, @maciej-ka, @abvthecity, @damiensedgwick, @alitas, @RiskyMH, @ytreister, @sommeeeer, @n1ckoates, @yongholeeme, @spidersouris, @gurkerl83, @cassiossantos, @Netail, @tknickman, @eur00t, @cseas, @nnnnoel, @Manoj-M-S, @lfades, @matmannion, @mikeboensel, @nphmuller, @apostolos, @k15a, @pavelee, @locothedev, @vexcat, @Zach-Jaensch, @decepulis, @gadcam, @lukahartwig, @jsanford8, @RobinMalfait, @raunofreiberg, @mohsen1, @skushagra, @amannn, @HQidea, @jrandolf, @smit-err, @littledivy, @k35o, @martinsione, @CvX, @msereniti, @Timer, @Iftee97, @chibicode, @RobPruzan, @PlagueFPS, @bjunix, @maximevtush, @michaelven, @sedlukha, @johannpinson, @AxelUser, @Nayeem-XTREME, @IcaroG, @blurrah, @lachlanjc, @ashi009, @conico974, @raphaelcosta, @dulmandakh, @khuezy, @Knoa0405, @wangsijie, @stefanprobst, @wentsul, @loopy-lim, @bratvanov, @hedgeday, и @cassian-goode за помощь!