Next.js 15 RC (Release Candidate)

Доступна кандидатская версия (Release Candidate, RC) Next.js 15. Эта ранняя версия позволяет протестировать новые функции перед стабильным релизом.

• React: Поддержка React 19 RC, экспериментального React Compiler и улучшения обработки ошибок гидратации
• Кэширование: Запросы fetch, GET Route Handlers и клиентская навигация больше не кэшируются по умолчанию
• Частичный пререндеринг (экспериментальный): Новая опция конфигурации для Layout и Page для постепенного внедрения
• next/after (экспериментальный): Новый API для выполнения кода после завершения потоковой передачи ответа
• create-next-app: Обновлённый дизайн и новый флаг для включения Turbopack в локальной разработке
• Бандлинг внешних пакетов (стабильно): Новые опции конфигурации для App и Pages Router

Попробуйте Next.js 15 RC уже сегодня:

npm install next@rc react@rc react-dom@rc

React 19 RC

App Router в Next.js построен на канареечной версии React для фреймворков, что позволило разработчикам использовать новые API React и давать обратную связь до выхода версии 19.

Next.js 15 RC теперь поддерживает React 19 RC, включая новые функции для клиента и сервера, такие как Actions.

Ознакомьтесь с руководством по обновлению Next.js 15, руководством по обновлению React 19 и посмотрите ключевой доклад React Conf для получения дополнительной информации.

Примечание: Некоторые сторонние библиотеки могут быть пока несовместимы с React 19.

React Compiler (экспериментальный)

React Compiler — это новый экспериментальный компилятор, созданный командой React в Meta. Компилятор глубоко анализирует ваш код, понимая семантику чистого JavaScript и Правила React, что позволяет ему автоматически оптимизировать ваш код. Компилятор сокращает необходимость ручного мемоизирования через API вроде useMemo и useCallback — упрощая код, облегчая его поддержку и уменьшая вероятность ошибок.

В Next.js 15 мы добавили поддержку React Compiler.

Установите babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

Затем добавьте опцию experimental.reactCompiler в next.config.js:

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
module.exports = nextConfig;

При необходимости можно настроить компилятор для работы в режиме "opt-in":

const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};
 
module.exports = nextConfig;

Примечание: React Compiler в Next.js пока доступен только через плагин Babel, что может увеличить время сборки.

Узнайте больше о React Compiler и доступных опциях конфигурации Next.js.

Улучшения обработки ошибок гидратации

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

Например, так выглядело сообщение об ошибке гидратации в Next.js 14.1:

В Next.js 15 RC это улучшено до:

Обновления кэширования

App Router в Next.js запускался с определёнными настройками кэширования по умолчанию. Они были разработаны для обеспечения максимальной производительности с возможностью отказа при необходимости.

На основе ваших отзывов мы пересмотрели эвристики кэширования и их взаимодействие с такими проектами, как Partial Prerendering (PPR), и сторонними библиотеками, использующими fetch.

В Next.js 15 мы меняем настройки по умолчанию для запросов fetch, GET Route Handlers и Client Router Cache — теперь они не кэшируются по умолчанию. Если вы хотите сохранить предыдущее поведение, можно явно включить кэширование.

Мы продолжаем улучшать кэширование в Next.js, и подробности будут объявлены в релизе Next.js 15 GA.

Запросы fetch больше не кэшируются по умолчанию

Next.js использует опцию кэша Web fetch API для настройки взаимодействия серверных запросов fetch с постоянным HTTP-кэшем фреймворка:

fetch('https://...', { cache: 'force-cache' | 'no-store' });

• no-store — получать ресурс с удалённого сервера при каждом запросе без обновления кэша
• force-cache — получать ресурс из кэша (если он есть) или с удалённого сервера с обновлением кэша

В Next.js 14 по умолчанию использовался force-cache, если опция cache не была указана, за исключением случаев использования динамических функций или настроек.

В Next.js 15 по умолчанию используется no-store, если опция cache не указана. Это означает, что запросы fetch не будут кэшироваться по умолчанию.

Вы всё ещё можете включить кэширование запросов fetch:

• Установив опцию cache в force-cache для отдельного вызова fetch
• Установив опцию dynamic в 'force-static' для отдельного маршрута
• Установив опцию fetchCache в 'default-cache', чтобы переопределить все запросы fetch в Layout или Page для использования force-cache, если они явно не указывают свою опцию cache

GET Route Handlers больше не кэшируются по умолчанию

В Next.js 14 Route Handlers с методом HTTP GET кэшировались по умолчанию, если не использовались динамические функции или настройки. В Next.js 15 функции GET не кэшируются по умолчанию.

Вы всё ещё можете включить кэширование, используя статическую настройку маршрута, например export dynamic = 'force-static'.

Специальные Route Handlers, такие как sitemap.ts, opengraph-image.tsx, icon.tsx и другие файлы метаданных, остаются статическими по умолчанию, если не используются динамические функции или настройки.

Клиентский кеш роутера больше не кеширует компоненты страниц по умолчанию

В Next.js 14.2.0 мы представили экспериментальный флаг staleTimes, позволяющий настраивать Кеш роутера.

В Next.js 15 этот флаг остаётся доступным, но мы меняем поведение по умолчанию, устанавливая staleTime равным 0 для сегментов страниц. Это означает, что при навигации по приложению клиент всегда будет отражать самые свежие данные из компонентов страниц, которые становятся активными в ходе навигации. Однако некоторые важные аспекты поведения остаются неизменными:

• Данные общих макетов не будут повторно запрашиваться с сервера, чтобы продолжать поддерживать частичный рендеринг.
• Навигация назад/вперёд по-прежнему будет восстанавливаться из кеша, чтобы обеспечить восстановление позиции прокрутки браузером.
• Loading.js останется в кеше на 5 минут (или значение, указанное в конфигурации staleTimes.static).

Вы можете вернуть предыдущее поведение Клиентского кеша роутера, установив следующую конфигурацию:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};
 
module.exports = nextConfig;

Постепенное внедрение частичного предварительного рендеринга (PPR) (Экспериментально)

В Next.js 14 мы представили частичный предварительный рендеринг (PPR) — оптимизацию, сочетающую статический и динамический рендеринг на одной странице.

В настоящее время Next.js по умолчанию использует статический рендеринг, если вы не применяете динамические функции, такие как cookies(), headers() и некешированные запросы данных. Эти API переводят весь маршрут в динамический рендеринг. С PPR вы можете обернуть любой динамический UI в границы Suspense. При новом запросе Next.js немедленно отдаст статическую HTML-оболочку, а затем отрендерит и передаст динамические части в том же HTTP-запросе.

Для постепенного внедрения мы добавили опцию конфигурации маршрута experimental_ppr, позволяющую включать PPR для определённых макетов и страниц:

import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"
 
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
	     <StaticComponent />
	     <Suspense fallback={...}>
		     <DynamicComponent />
	     </Suspense>
     </>
  };
}

Чтобы использовать новую опцию, вам нужно установить конфигурацию experimental.ppr в файле next.config.js в значение 'incremental':

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};
 
module.exports = nextConfig;

Как только все сегменты будут поддерживать PPR, можно будет безопасно установить значение ppr в true и включить его для всего приложения и всех будущих маршрутов.

Мы расскажем больше о наших планах по PPR в блоге о выпуске Next.js 15 GA.

Узнайте больше о частичном предварительном рендеринге.

Выполнение кода после ответа с помощью next/after (Экспериментально)

При обработке пользовательского запроса сервер обычно выполняет задачи, непосредственно связанные с формированием ответа. Однако вам могут потребоваться такие задачи, как логирование, аналитика и синхронизация с внешними системами.

Поскольку эти задачи не связаны напрямую с ответом, пользователь не должен ждать их завершения. Отложенное выполнение работы после ответа пользователю представляет сложность, потому что serverless-функции прекращают вычисления сразу после закрытия ответа.

after() — это новый экспериментальный API, решающий эту проблему, позволяя планировать выполнение работы после завершения потоковой передачи ответа, что позволяет выполнять вторичные задачи без блокировки основного ответа.

Для использования добавьте experimental.after в next.config.js:

const nextConfig = {
  experimental: {
    after: true,
  },
};
 
module.exports = nextConfig;

Затем импортируйте функцию в серверные компоненты, серверные действия, обработчики маршрутов или middleware.

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // Вторичная задача
  after(() => {
    log();
  });
 
  // Основная задача
  return <>{children}</>;
}

Узнайте больше о next/after.

Обновления create-next-app

Для Next.js 15 мы обновили create-next-app с новым дизайном.

При запуске create-next-app появится новый запрос о включении Turbopack для локальной разработки (по умолчанию No).

✔ Хотите использовать Turbopack для next dev? … Нет / Да

Флаг --turbo можно использовать для включения Turbopack.

npx create-next-app@rc --turbo

Чтобы упростить начало работы над новым проектом, в CLI добавлен новый флаг --empty. Это удалит все лишние файлы и стили, оставив минимальную страницу "hello world".

npx create-next-app@rc --empty

Оптимизация сборки внешних пакетов (Стабильно)

Сборка внешних пакетов может улучшить производительность холодного старта вашего приложения. В App Router внешние пакеты собираются по умолчанию, и вы можете исключить определённые пакеты, используя новую опцию конфигурации serverExternalPackages.

В Pages Router внешние пакеты по умолчанию не собираются, но вы можете указать список пакетов для сборки, используя существующую опцию transpilePackages. С этой опцией конфигурации вам нужно указывать каждый пакет вручную.

Для унификации конфигурации между App и Pages Router мы вводим новую опцию bundlePagesRouterDependencies, соответствующую автоматической сборке по умолчанию в App Router. Затем вы можете использовать serverExternalPackages для исключения определённых пакетов, если это необходимо.

const nextConfig = {
  // Автоматическая сборка внешних пакетов в Pages Router:
  bundlePagesRouterDependencies: true,
  // Исключение определённых пакетов из сборки для App и Pages Router:
  serverExternalPackages: ['имя-пакета'],
};
 
module.exports = nextConfig;

Узнайте больше об оптимизации внешних пакетов.

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

• [Критическое] Минимальная версия React теперь 19 RC
• [Критическое] next/image: Удалена squoosh в пользу sharp как опциональной зависимости (PR)
• [Критическое] next/image: Изменено значение по умолчанию Content-Disposition на attachment (PR)
• [Критическое] next/image: Ошибка при наличии пробелов в начале или конце src (PR)
• [Критическое] Middleware: Применение условия react-server для ограничения нерекомендуемых импортов React API (PR)
• [Критическое] next/font: Удалена поддержка внешнего пакета @next/font (PR)
• [Критическое] next/font: Удалено хеширование font-family (PR)
• [Критическое] Кеширование: force-dynamic теперь устанавливает значение по умолчанию no-store для кеша fetch (PR)
• [Критическое] Конфигурация: Включены по умолчанию swcMinify (PR), missingSuspenseWithCSRBailout (PR) и outputFileTracing (PR), удалены устаревшие опции
• [Критическое] Удалена автоинструментация для Speed Insights (теперь необходимо использовать специальный пакет @vercel/speed-insights) (PR)
• [Критическое] Удалено расширение .xml для динамических маршрутов sitemap и выравнивание URL sitemap между разработкой и продакшеном (PR)
• [Улучшение] Метаданные: Обновлены fallback-значения переменных окружения для metadataBase при размещении на Vercel (PR)
• [Улучшение] Исправление tree-shaking при смешанных импортах namespace и named из optimizePackageImports (PR)
• [Улучшение] Параллельные маршруты: Предоставление всех известных параметров для catch-all маршрутов без совпадений (PR)
• [Улучшение] Конфигурация bundlePagesExternals теперь стабильна и переименована в bundlePagesRouterDependencies
• [Улучшение] Конфигурация serverComponentsExternalPackages теперь стабильна и переименована в serverExternalPackages
• [Улучшение] create-next-app: Новые проекты по умолчанию игнорируют все файлы .env (PR)
• [Документация] Улучшена документация по аутентификации (PR)
• [Документация] Пакет @next/env (PR)

Чтобы узнать больше, ознакомьтесь с руководством по обновлению.

Участники

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

• Команде Next.js: Эндрю, Балажу, Итану, Янке, Цзячи, Джимми, Джей-Джею, Джошу, Сэму, Себастьяну, Себби, Шу, Стивену, Тиму, Вайатту и Зэку.
• Команде Turbopack: Алексу, Бенджамину, Донни, Лии, Мае, О-Джею, Тобиасу и Уиллу.
• Документации Next.js: Дельбе, Стеф, Майклу, Энтони и Ли.

Огромная благодарность @devjiwonchoi, @ijjk, @Ethan-Arrowood, @sokra, @kenji-webdev, @wbinnssmith, @huozhi, @domdomegg, @samcx, @Jaaneek, @evanwinter, @wyattjoh, @kdy1, @balazsorban44, @feedthejim, @ztanner, @ForsakenHarmony, @kwonoj, @delbaoliveira, @stipsan, @leerob, @shuding, @xiaohanyu, @timneutkens, @dvoytenko, @bobaaaaa, @bgw, @gaspar09, @souporserious, @unflxw, @kiner-tang, @Ehren12, @EffectDoplera, @IAmKushagraSharma, @Auxdible, @sean-rallycry, @Jeffrey-Zutt, @eps1lon, @jeanmax1me, @unstubbable, @NilsJacobsen, @PaulAsjes, @adiguno, @ryan-nauman, @zsh77, @KagamiChan, @steveluscher, @MehfoozurRehman, @vkryachko, @chentsulin, @samijaber, @begalinsaf, @FluxCapacitor2, @lukahartwig, @brianshano, @pavelglac, @styfle, @symant233, @HristovCodes, @karlhorky, @jonluca, @jonathan-ingram, @mknichel, @sopranopillow, @Gomah, @imddc, @notrab, @gabrielrolfsen, @remorses, @AbhiShake1, @agadzik, @ryota-murakami, @rishabhpoddar, @rezamauliadi, @IncognitoTGT, @webtinax, @BunsDev, @nisabmohd, @z0n, @bennettdams, @joeshub, @n1ckoates, @srkirkland, @RiskyMH, @coopbri, @okoyecharles, @diogocapela, @dnhn, @typeofweb, @davidsa03, @imranolas, @lubieowoce, @maxhaomh, @mirasayon, @blvdmitry, @hwangstar156, @lforst, @emmerich, @christian-bromann, @Lsnsh, @datner, @hiro0218, @flybayer, @ianmacartney, @ypessoa, @ryohidaka, @icyJoseph, @Arinji2, @lovell, @nsams, @Nayeem-XTREME, @JamBalaya56562, @Arindam200, @gaojude, @qqww08, @todor0v, @coltonehrman и @wiesson за помощь!