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

Next.js 15 RC 2

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

После анонса первого Release Candidate для Next.js 15 в мае, мы подготовили второй Release Candidate на основе ваших отзывов. Вот над чем мы работали:

Попробуйте Next.js 15 Release Candidate (RC2) уже сегодня:

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

Примечание: Этот Release Candidate включает все изменения из предыдущего RC.

Плавные обновления с codemod CLI

Мы включаем codemods (автоматизированные преобразования кода) в каждый крупный релиз Next.js, чтобы помочь автоматизировать обновление с учётом критических изменений.

Чтобы сделать обновление ещё более плавным, мы выпустили улучшенный codemod CLI:

npx @next/codemod@canary upgrade rc

Этот инструмент помогает обновить вашу кодовую базу до последних стабильных или предрелизных версий. CLI обновит зависимости, покажет доступные codemods и проведёт вас через их применение. Указанный dist-тег в командной строке (@rc, @canary и т. д.) определяет версию для обновления.

Узнайте больше о Next.js codemods.

Turbopack для разработки

Turbopack для локальной разработки станет стабильным в основном релизе Next.js 15, оставаясь опциональным. Вы можете попробовать его уже сегодня, выполнив:

next dev --turbo

Благодаря тысячам разработчиков, участвовавших в тестировании, сообщении о проблемах и проверке исправлений на протяжении бета- и RC-фаз Turbopack, мы исправили 54 проблемы на GitHub. Наряду с этим, наши внутренние тесты на vercel.com, v0.dev и nextjs.org помогли выявить множество дополнительных улучшений.

За последние три месяца мы сосредоточились на оптимизации производительности холодной компиляции. По сравнению с предыдущим релизом мы наблюдаем:

  • Снижение использования памяти на 25–35%.
  • Ускорение компиляции на 30–50% для больших страниц с тысячами модулей.

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

Впереди команда Turbopack активно работает над устойчивым кэшированием, снижением использования памяти и Turbopack для next build — с 96% проходящих тестов.

Примечание: Ознакомьтесь со списком поддерживаемых и неподдерживаемых функций Turbopack.

Асинхронные API запросов (Breaking Change)

В традиционном Server-Side Rendering сервер ждёт запроса перед рендерингом контента. Однако не все компоненты зависят от данных, специфичных для запроса, поэтому ждать запроса для их рендеринга необязательно. В идеале сервер должен подготовить как можно больше до получения запроса. Чтобы это стало возможным и заложить основу для будущих оптимизаций, нам нужно знать, когда ждать запрос.

Поэтому мы переводим API, зависящие от данных запроса — такие как headers, cookies, params и searchParams — в асинхронный режим.

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

Это критическое изменение, затрагивающее следующие API:

  • cookies
  • headers
  • draftMode
  • params в layout.js, page.js, route.js, default.js, generateMetadata и generateViewport
  • searchParams в page.js

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

npx @next/codemod@canary next-async-request-api .

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

Улучшенная безопасность Server Actions

Server Actions — это серверные функции, которые можно вызывать с клиента. Они определяются добавлением директивы 'use server' в начале файла и экспортом асинхронной функции.

Даже если Server Action или вспомогательная функция не импортируется в вашем коде, она остаётся общедоступным HTTP-эндпоинтом. Хотя это технически правильно, это может привести к непреднамеренному раскрытию таких функций.

Для улучшения безопасности мы внедрили следующие изменения:

  • Удаление мёртвого кода: Неиспользуемые Server Actions не будут иметь свои ID в клиентском JavaScript-бандле, уменьшая его размер и улучшая производительность.
  • Безопасные ID действий: Next.js теперь создаёт неугадываемые, недетерминированные ID, позволяющие клиенту ссылаться и вызывать Server Action. Эти ID периодически пересчитываются между сборками для повышения безопасности.
// app/actions.js
'use server';
 
// Это действие **используется** в нашем приложении, поэтому Next.js
// создаст безопасный ID для вызова Server Action с клиента.
export async function updateUserAction(formData) {}
 
// Это действие **не используется** в нашем приложении, поэтому Next.js
// автоматически удалит этот код во время `next build`
// и не создаст публичный эндпоинт.
export async function deleteUserAction(formData) {}

Всё равно следует рассматривать Server Actions как публичные HTTP-эндпоинты. Узнайте больше о безопасности Server Actions.

Индикатор статических маршрутов

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

Вы также можете использовать вывод next build для просмотра стратегии рендеринга всех маршрутов.

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

Узнайте больше об индикаторе статических маршрутов, который можно отключить.

Компонент <Form>

Новый компонент <Form> расширяет HTML-элемент <form> с префетчингом, клиентской навигацией и прогрессивным улучшением.

Он полезен для форм, которые ведут на новую страницу, например, поисковой формы, ведущей на страницу результатов.

import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

Компонент <Form> включает:

  • Префетчинг: Когда форма в зоне видимости, layout и loading UI предзагружаются, делая навигацию быстрой.
  • Клиентская навигация: При отправке формы общие лэйауты и клиентское состояние сохраняются.
  • Прогрессивное улучшение: Если JavaScript ещё не загружен, форма всё равно работает через полную перезагрузку страницы.

Раньше для реализации этих функций требовалось много ручного кода. Например:

// Примечание: Пример сокращён для демонстрации.
// Не рекомендуется для продакшн-кода.
 
'use client'
 
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
 
export default function Form(props) {
  const action = props.action
  const router = useRouter()
 
  useEffect(() => {
    // если цель формы — URL, префетчим его
    if (typeof action === 'string') {
      router.prefetch(action)
    }
  }, [action, router])
 
  function onSubmit(event) {
    event.preventDefault()
 
    // собираем все поля формы и вызываем `router.push` с URL-кодированными данными
    const formData = new FormData(event.currentTarget)
    const data = new URLSearchParams()
 
    for (const [name, value] of formData) {
      data.append(name, value as string)
    }
 
    router.push(`${action}?${data.toString()}`)
  }
 
  if (typeof action === 'string') {
    return <form onSubmit={onSubmit} {...props} />
  }
 
  return <form {...props} />
}

Узнайте больше о компоненте <Form>.

Поддержка next.config.ts

Next.js теперь поддерживает TypeScript-файл next.config.ts и предоставляет тип NextConfig для автодополнения и типобезопасных опций:

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  /* настройки здесь */
};
 
export default nextConfig;

Узнайте больше о поддержке TypeScript в Next.js.

instrumentation.js (Stable)

Файл instrumentation с API register() позволяет подключаться к жизненному циклу сервера Next.js для мониторинга производительности, отслеживания источников ошибок и глубокой интеграции с библиотеками наблюдения, такими как OpenTelemetry.

Эта функция теперь стабильна, и опцию конфигурации experimental.instrumentationHook можно удалить.

Кроме того, мы сотрудничали с Sentry над разработкой нового хука onRequestError, который можно использовать для:

  • Сбора важного контекста обо всех ошибках на сервере, включая:
    • Роутер: Pages Router или App Router
    • Контекст сервера: Server Component, Server Action, Route Handler или Middleware
  • Отправки ошибок в ваш любимый сервис мониторинга.
export async function onRequestError(err, request, context) {
  await fetch('https://...', {
    method: 'POST',
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { 'Content-Type': 'application/json' },
  });
}
 
export async function register() {
  // инициализация SDK вашего сервиса мониторинга
}

Узнайте больше о функции onRequestError.

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

HMR для Server Components

Во время разработки Server Components перевыполняются при сохранении. Это означает, что любые fetch-запросы к вашим API или сторонним сервисам также выполняются.

Для улучшения производительности локальной разработки и снижения потенциальных затрат на платные API-вызовы мы теперь гарантируем, что Hot Module Replacement (HMR) может повторно использовать ответы fetch из предыдущих рендеров.

Узнайте больше о кеше HMR для Server Components.

Ускоренная статическая генерация для App Router

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

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

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

Расширенный контроль статической генерации (Экспериментально)

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

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

const nextConfig = {
  experimental: {
	  // сколько раз Next.js будет повторять попытки генерации страниц при ошибках
	  // перед завершением сборки с ошибкой
    staticGenerationRetryCount: 1
    // сколько страниц будет обрабатываться одним воркером
    staticGenerationMaxConcurrency: 8
    // минимальное количество страниц для создания нового воркера экспорта
    staticGenerationMinPagesPerWorker: 25
  },
}
 
export default nextConfig;

Подробнее о настройках статической генерации.

Улучшения для самостоятельного хостинга

При самостоятельном хостинге приложений может потребоваться более точный контроль над директивами Cache-Control.

Один из распространённых случаев — управление периодом stale-while-revalidate для страниц с инкрементальной статической регенерацией (ISR). Мы внедрили два улучшения:

  1. Теперь можно настраивать значение expireTime в next.config. Ранее это была опция experimental.swrDelta.
  2. Обновлено значение по умолчанию до одного года, что гарантирует корректное применение семантики stale-while-revalidate большинством CDN.

Мы также больше не перезаписываем пользовательские значения Cache-Control значениями по умолчанию, обеспечивая полный контроль и совместимость с любой CDN-настройкой.

Наконец, мы улучшили оптимизацию изображений при самостоятельном хостинге. Ранее мы рекомендовали устанавливать sharp для оптимизации изображений на сервере Next.js. Иногда это требование упускали. Начиная с Next.js 15, больше не нужно вручную устанавливать sharp — Next.js будет использовать sharp автоматически при запуске через next start или в автономном режиме (standalone output mode).

Подробнее см. в нашем новом демо и обучающем видео по самостоятельному хостингу Next.js.

Поддержка ESLint 9

Next.js 15 также добавляет поддержку ESLint 9, после окончания поддержки ESLint 8 5 октября 2024 года.

Для плавного перехода Next.js сохраняет обратную совместимость, то есть можно продолжать использовать как ESLint 8, так и 9.

Если вы обновитесь до ESLint 9, и мы обнаружим, что вы ещё не перешли на новый формат конфигурации, Next.js автоматически применит обходное решение ESLINT_USE_FLAT_CONFIG=false для упрощения миграции.

Кроме того, устаревшие опции, такие как —ext и —ignore-path, будут удалены при запуске next lint. Обратите внимание, что ESLint окончательно запретит эти старые конфигурации в версии 10, поэтому рекомендуем начать миграцию как можно скорее.

Подробности об этих изменениях см. в руководстве по миграции.

В рамках этого обновления мы также обновили eslint-plugin-react-hooks до версии v5.0.0, которая добавляет новые правила для использования React Hooks. Все изменения можно изучить в списке изменений для [email protected].

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

  • Все изменения, ранее описанные в посте о RC 1
  • [Критическое] Устарела экспортная настройка export const runtime = "experimental-edge" в App Router. Теперь следует использовать export const runtime = "edge". Мы добавили кодмод для автоматического перехода (PR)
  • [Критическое] Вызов revalidateTag и revalidatePath во время рендеринга теперь вызывает ошибку (PR)
  • [Критическое] Файлы instrumentation.js и middleware.js теперь используют встроенные пакеты React (PR)
  • [Критическое] Минимальная требуемая версия Node.js обновлена до 18.18.0 (PR)
  • [Критическое] next/dynamic: удалён устаревший проп suspense, и при использовании компонента в App Router больше не добавляется пустая граница Suspense (PR)
  • [Критическое] При разрешении модулей в Edge Runtime условие worker больше не применяется (PR)
  • [Критическое] Запрещено использование ssr: false с next/dynamic в Server Components (PR)
  • [Улучшение] Опции outputFileTracingRoot, outputFileTracingIncludes и outputFileTracingExcludes переведены из экспериментальных в стабильные (PR)
  • [Улучшение] Исключено слияние глобальных CSS-файлов с CSS-модулями глубже в дереве (PR)
  • [Улучшение] Обработчик кеша теперь можно указать через переменную окружения NEXT_CACHE_HANDLER_PATH (PR)
  • [Улучшение] Pages Router теперь поддерживает React 18 и React 19 (PR)
  • [Улучшение] В Error Overlay добавлена кнопка для копирования URL Node.js Inspector, если инспектор включён (PR)
  • [Улучшение] Клиентские префетчи в App Router теперь используют атрибут priority (PR)
  • [Улучшение] Next.js теперь предоставляет функцию unstable_rethrow для повторного выброса внутренних ошибок в App Router (PR)
  • [Улучшение] unstable_after теперь можно использовать в статических страницах (PR)
  • [Улучшение] Если компонент next/dynamic используется во время SSR, его чанк будет префетчен (PR)
  • [Улучшение] Опция esmExternals теперь поддерживается в App Router (PR)
  • [Улучшение] Опция experimental.allowDevelopmentBuild позволяет использовать NODE_ENV=development с next build для отладки (PR)
  • [Улучшение] Трансформы Server Actions теперь отключены в Pages Router (PR)
  • [Улучшение] Воркеры сборки теперь предотвращают зависание при завершении работы (PR)
  • [Улучшение] При редиректе из Server Action ревалидации теперь применяются корректно (PR)
  • [Улучшение] Динамические параметры теперь корректно обрабатываются для параллельных маршрутов в Edge Runtime (PR)
  • [Улучшение] Статические страницы теперь учитывают staleTime после первоначальной загрузки (PR)
  • [Улучшение] Обновлён vercel/og с исправлением утечки памяти (PR)
  • [Улучшение] Обновлены временные метки для совместимости с пакетами типа msw для мокирования API (PR)

Участники

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

Отдельная благодарность @huozhi, @shuding, @wyattjoh, @PaulAsjes, @mcnaveen, @timneutkens, @stipsan, @aktoriukas, @sirTangale, @greatvivek11, @sokra, @anatoliik-lyft, @wbinnssmith, @coltonehrman, @hungdoansy, @kxlow, @ztanner, @manovotny, @leerob, @ryota-murakami, @ijjk, @pnutmath, @feugy, @Jeffrey-Zutt, @wiesson, @eps1lon, @devjiwonchoi, @Ethan-Arrowood, @kenji-webdev, @domdomegg, @samcx, @Jaaneek, @evanwinter, @kdy1, @balazsorban44, @feedthejim, @ForsakenHarmony, @kwonoj, @delbaoliveira, @xiaohanyu, @dvoytenko, @bobaaaaa, @bgw, @gaspar09, @souporserious, @unflxw, @kiner-tang, @Ehren12, @EffectDoplera, @IAmKushagraSharma, @Auxdible, @sean-rallycry, @jeanmax1me, @unstubbable, @NilsJacobsen, @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, @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, @tokkiyaa, @arlyon, @lorensr, @Juneezee, @Sayakie, @IGassmann, @bosconian-dynamics, @phryneas, @akazwz, @atik-persei, @shubh73, @alpedia0, @chogyejin, @notomo, @ArnoldVanN, @dhruv-kaushik, @kevva, @Kahitar, @anay-208, @boris-szl, @devnyxie, @LorisSigrist, @M-YasirGhaffar, @Lada496, @kippmr, @torresgol10, @pkiv, @Netail, @jontewks, @ArnaudFavier, @chrisjstott, @mratlamwala, @mayank1513, @karlkeefer, @kshehadeh, @Marukome0743, @a89529294, @anku255, @KeisukeNagakawa, @andrii-bodnar, @aldosch, @versecafe, @steadily-worked, @cfrank, @QiuranHu, @farsabbutt, @joostmeijles, @saltcod, @archanaagivale30, @crutchcorn, @crebelskydico, @Maaz-Ahmed007, @jophy-ye, @remcohaszing, @JoshuaKGoldberg, @creativoma, @GyoHeon, @SukkaW, @MaxLeiter, @neila-a, @stylessh, @Teddir, @ManuLpz4, @Julian-Louis, @syi0808, @mert-duzgun, @amannn, @MonstraG, @hamirmahal, @tariknh, @Kikobeats, @LichuAcu, @Kuboczoch, @himself65, @Sam-Phillemon9493, @Shruthireddy04, @Hemanshu-Upadhyay, @timfuhrmann, @controversial, @pathliving, @mischnic, @mauroaccornero, @NavidNourani, @allanchau, @ekremkenter, @yurivangeffen, @gnoff, @darthmaim, @gdborton, @Willem-Jaap, @KentoMoriwaki, @TrevorSayre, @marlier, @Luluno01, @xixixao, @domin-mnd, @niketchandivade, @N2D4, @kjugi, @luciancah, @mud-ali, @codeSTACKr, @luojiyin1987, @mehmetozguldev, @ronanru, @tknickman, @joelhooks, @khawajaJunaid, @rubyisrust, @abdull-haseeb, @bewinsnw, @housseindjirdeh, @li-jia-nan, @aralroca, @s-ekai, @ah100101, @jantimon, @jordienr, @iscekic, @Strift, @slimbde, @nauvalazhar, @HughHzyb, @guisehn, @wesbos, @OlyaPolya, @paarthmadan, @AhmedBaset, @dineshh-m, @avdeev, @Bhavya031, @MildTomato, @Bjornnyborg, @amikofalvy, @yosefbeder, @kjac, @woutvanderploeg, @Ocheretovich, @ProchaLu, @luismiramirez, @omahs, @theoludwig, @abhi12299, @sommeeeer, @lumirlumir, @royalfig, @iampoul, @molebox, @txxxxc, @zce, @mamuso, @kahlstrm, @vercel-release-bot, @zhawtof, @PapatMayuri, @PlagueFPS, @IDNK2203, @jericopulvera, @liby, @CannonLock, @timfish, @whatisagi, @none23, @haouvw, @Pyr33x, @SouthLink, @frydj, @CrutchTheClutch, @sleevezip, @r34son, @yunsii, @md-rejoyan-islam, @kartheesan05, @nattui, @KonkenBonken, @weicheng95, @brekk, @Francoscopic, @B33fb0n3, @ImDR, @nurullah, @hdodov, @ebCrypto, @soedirgo, @floriangosse, @Tim-Zj, @raeyoung-kim, @erwannbst, @DerTimonius, @hirotomoyamada, @Develliot, @chandanpasunoori, @vicb, @ankur-dwivedi, @kidonng, @baeharam, @AnaTofuZ, @coderfin, @xugetsu, @alessiomaffeis, @kutsan, @jordyfontoura, @sebmarkbage, @tranvanhieu01012002, @jlbovenzo, @Luk-z, @jaredhan418, @bangseongbeom, @penicillin0, @neoFinch, @DeepakBalaraman, @Manoj-M-S, @Unsleeping, @lonr, @Aerilym, @ytori, @acdlite, @actopas, @n-ii-ma, @adcichowski, @mobeigi, @JohnGemstone, и @jjm2317 за помощь!