Next.js 14.1

Next.js 14.1 включает улучшения для разработчиков, такие как:

• Улучшенный самостоятельный хостинг: Новая документация и обработчик кэша
• Улучшения Turbopack: 5600 прошедших тестов для next dev --turbo
• Улучшения DX: Улучшенные сообщения об ошибках, поддержка pushState и replaceState
• Параллельные и перехватываемые маршруты: 20 исправлений ошибок на основе ваших отзывов
• Улучшения next/image: Поддержка <picture>, арт-дирекшна и темной темы

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

npx create-next-app@latest

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

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

• Переменные окружения времени выполнения
• Пользовательская конфигурация кэша для ISR
• Пользовательская оптимизация изображений
• Middleware

В Next.js 14.1 мы также стабилизировали возможность предоставления пользовательских обработчиков кэша для Incremental Static Regeneration и более детализированного Data Cache для App Router:

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // отключаем кэширование в памяти по умолчанию
};

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

Например, вы можете сохранять кэшированные значения где угодно: в Redis или Memcached. Мы благодарим @neshca за их адаптер обработчика кэша Redis и пример.

Улучшения Turbopack

Мы продолжаем работать над надежностью и производительностью локальной разработки в Next.js:

• Надежность: Turbopack проходит все тесты разработки Next.js и используется в приложениях Vercel
• Производительность: Улучшено время начальной компиляции и Fast Refresh в Turbopack
• Использование памяти: Улучшено потребление памяти в Turbopack

Мы планируем стабилизировать next dev --turbo в одном из будущих релизов, пока оставляя его опциональным.

Надежность

Next.js с Turbopack теперь проходит 5600 тестов разработки (94%), на 600 больше, чем в прошлом обновлении. Вы можете следить за прогрессом на areweturboyet.com.

Мы продолжаем использовать next dev --turbo во всех Next.js-приложениях Vercel, включая vercel.com и v0.dev. Все инженеры, работающие над этими приложениями, ежедневно используют Turbopack.

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

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

Для vercel.com, большого Next.js-приложения, мы наблюдали:

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

В v0.dev мы обнаружили возможность оптимизировать способ обнаружения и сборки React Client Components в Turbopack — это привело к ускорению начальной компиляции до 61.5%. Это улучшение производительности также наблюдалось на vercel.com.

Будущие улучшения

В Turbopack сейчас есть кэширование в памяти, что ускоряет инкрементную компиляцию для Fast Refresh.

Однако кэш в настоящее время не сохраняется при перезапуске сервера разработки Next.js. Следующий большой шаг для производительности Turbopack — кэширование на диске, которое позволит сохранять кэш при перезапуске сервера разработки.

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

Улучшенные сообщения об ошибках и Fast Refresh

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

• Ошибки, которые ранее отображались как ошибки сборщика (например, webpack-internal), теперь правильно показывают исходный код ошибки и затронутый файл.
• После появления ошибки в клиентском компоненте и ее исправления в редакторе, Fast Refresh не очищал экран ошибки. Требовалась жесткая перезагрузка. Мы исправили множество таких случаев. Например, при попытке экспортировать metadata из клиентского компонента.

Вот пример предыдущего сообщения об ошибке:

Пример ошибки из fetch-запроса в Next.js 14.

В Next.js 14.1 это улучшено:

Ошибки из fetch-запросов во время рендеринга теперь отображают исходный код ошибки и затронутый файл.

window.history.pushState и window.history.replaceState

App Router теперь поддерживает использование нативных методов pushState и replaceState для обновления истории браузера без перезагрузки страницы.

Вызовы pushState и replaceState интегрируются в App Router Next.js, позволяя синхронизироваться с usePathname и useSearchParams.

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

'use client';
 
import { useSearchParams } from 'next/navigation';
 
export default function SortProducts() {
  const searchParams = useSearchParams();
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Сортировать по возрастанию</button>
      <button onClick={() => updateSorting('desc')}>Сортировать по убыванию</button>
    </>
  );
}

Узнайте больше об использовании нативного History API с Next.js.

Логирование кеша данных

Для улучшения наблюдаемости за кешированными данными в вашем Next.js приложении при запуске next dev, мы внесли ряд улучшений в опцию конфигурации logging configuration option.

Теперь можно отображать, было ли попадание в кеш (HIT) или пропуск (SKIP), а также полный запрашиваемый URL:

GET / 200 in 48ms
 ✓ Compiled /fetch-cache in 117ms
 GET /fetch-cache 200 in 165ms
  │ GET https://api.vercel.app/products/1 200 in 14ms (cache: HIT)
 ✓ Compiled /fetch-no-store in 150ms
 GET /fetch-no-store 200 in 548ms
  │ GET https://api.vercel.app/products/1 200 in 345ms (cache: SKIP)
  │  │  Cache missed reason: (cache: no-store)

Это можно включить через next.config.js:

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

Поддержка <picture> и Art Direction в next/image

Компонент Next.js Image теперь поддерживает более сложные сценарии использования через getImageProps() (стабильная версия), которые не требуют прямого использования <Image>. Это включает:

• Работу с background-image или image-set
• Работу с canvas context.drawImage() или new Image()
• Работу с <picture> медиа-запросами для реализации Art Direction или изображений для светлой/темной темы

import { getImageProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

Узнайте больше о getImageProps().

Параллельные и перехватываемые маршруты

В Next.js 14.1 мы внесли 20 улучшений в Параллельные и Перехватываемые маршруты.

В последних двух релизах мы сосредоточились на улучшении производительности и надежности Next.js. Теперь мы смогли внести множество улучшений в Параллельные и Перехватываемые маршруты на основе ваших отзывов. В частности, мы добавили поддержку catch-all маршрутов и Server Actions.

• Параллельные маршруты позволяют одновременно или условно отображать одну или несколько страниц в одном макете. Для высокодинамичных разделов приложения, таких как дашборды и ленты в социальных сетях, Параллельные маршруты можно использовать для реализации сложных паттернов маршрутизации.
• Перехватываемые маршруты позволяют загружать маршрут из другой части вашего приложения в текущем макете. Например, при клике на фото в ленте можно отобразить фото в модальном окне, наложенном на ленту. В этом случае Next.js перехватывает маршрут /photo/123, маскирует URL и накладывает его поверх /feed.

Узнайте больше о Параллельных и Перехватываемых маршрутах или посмотрите пример.

Другие улучшения

Начиная с версии 14.0, мы исправили ряд популярных багов, отмеченных сообществом.

Мы также недавно опубликовали видео с объяснением кеширования и распространенных ошибок с App Router, которые могут быть вам полезны.

• [Документация] Новая документация по Перенаправлениям
• [Документация] Новая документация по Тестированию
• [Документация] Новая документация с Чек-листом для продакшена
• [Функция] Добавлен компонент <GoogleAnalytics /> в next/third-parties (Документация)
• [Улучшение] create-next-app теперь меньше и быстрее устанавливается (PR)
• [Улучшение] Вложенные маршруты, вызывающие ошибки, теперь могут быть перехвачены global-error (PR)
• [Улучшение] redirect теперь учитывает basePath при использовании в server action (PR)
• [Улучшение] Исправлена работа next/script и beforeInteractive с App Router (PR)
• [Улучшение] Автоматическая транспиляция @aws-sdk и lodash для ускорения запуска маршрутов (PR)
• [Улучшение] Исправлено мелькание нестилизованного контента с next dev и next/font (PR)
• [Улучшение] Распространение ошибок notFound за пределы границы ошибок сегмента (PR)
• [Улучшение] Исправлена отдача публичных файлов с локализованных доменов при использовании i18n в Pages Router (PR)
• [Улучшение] Ошибка при передаче недопустимого значения revalidate (PR)
• [Улучшение] Исправлены проблемы с путями на Linux при сборке, созданной на Windows (PR)
• [Улучшение] Исправлен Fast Refresh / HMR при использовании multi-zone приложения с basePath (PR)
• [Улучшение] Улучшено корректное завершение работы по сигналам завершения (PR)
• [Улучшение] Конфликты модальных маршрутов при перехвате из разных маршрутов (PR)
• [Улучшение] Исправлены перехватываемые маршруты при использовании basePath (PR)
• [Улучшение] Предупреждение при отсутствии параллельного слота, приводящего к 404 (PR)
• [Улучшение] Улучшены перехватываемые маршруты при использовании с catch-all маршрутами (PR)
• [Улучшение] Улучшены перехватываемые маршруты при использовании с revalidatePath (PR)
• [Улучшение] Исправлено использование @children слотов с параллельными маршрутами (PR)
• [Улучшение] Исправлена TypeError при использовании параметров с параллельными маршрутами (PR)
• [Улучшение] Исправлена нормализация catch-all маршрутов для параллельных маршрутов по умолчанию (PR)
• [Улучшение] Исправлено отображение параллельных маршрутов в сводке next build (PR)
• [Улучшение] Исправлены параметры маршрутов при использовании перехватываемых маршрутов (PR)
• [Улучшение] Улучшены глубоко вложенные параллельные/перехватываемые маршруты (PR)
• [Улучшение] Исправлена 404 для перехватываемых маршрутов в сочетании с группами маршрутов (PR)
• [Улучшение] Исправлены параллельные маршруты с server actions / ревалидацией кеша маршрутизатора (PR)
• [Улучшение] Исправлено использование rewrites с перехватываемым маршрутом (PR)
• [Улучшение] Server Actions теперь работают из сторонних библиотек (PR)
• [Улучшение] Next.js теперь можно использовать внутри ESM-пакета (PR)
• [Улучшение] Оптимизации barrel-файлов для библиотек, таких как Material UI (PR)
• [Улучшение] Сборка теперь завершается с ошибкой при некорректном использовании useSearchParams без Suspense (PR)

Участники

Next.js — это результат совместной работы более 3000 разработчиков, отраслевых партнеров, таких как Google и Meta, и нашей основной команды в Vercel. Присоединяйтесь к сообществу на GitHub Discussions, Reddit и Discord.

Этот релиз стал возможен благодаря:

• Команде Next.js: Andrew, Balazs, Jiachi, Jimmy, JJ, Josh, Sebastian, Shu, Steven, Tim, Wyatt, и Zack.
• Команде Turbopack: Donny, Leah, Maia, OJ, Tobias, и Will.
• Документации Next.js: Delba, Steph, Michael, и Lee.

А также вкладу: @OlehDutchenko, @eps1lon, @ebidel, @janicklas-ralph, @JohnPhamous, @chentsulin, @akawalsky, @BlankParticle, @dvoytenko, @smaeda-ks, @kenji-webdev, @rv-david, @icyJoseph, @dijonmusters, @A7med3bdulBaset, @jenewland1999, @mknichel, @kdy1, @housseindjirdeh, @max-programming, @redbmk, @SSakibHossain10, @jamesmillerburgess, @minaelee, @officialrajdeepsingh, @LorisSigrist, @yesl-kim, @StevenKamwaza, @manovotny, @mcexit, @remcohaszing, @ryo-manba, @TranquilMarmot, @vinaykulk621, @haritssr, @divquan, @IgorVaryvoda, @LukeSchlangen, @RiskyMH, @ash2048, @ManuWeb3, @msgadi, @dhayab, @ShahriarKh, @jvandenaardweg, @DestroyerXyz, @SwitchBladeAK, @ianmacartney, @justinh00k, @tiborsaas, @ArianHamdi, @li-jia-nan, @aramikuto, @jquinc30, @samcx, @Haosik, @AkifumiSato, @arnabsen, @nfroidure, @clbn, @siddtheone, @zbauman3, @anthonyshew, @alexfradiani, @CalebBarnes, @adk96r, @pacexy, @hichemfantar, @michaldudak, @redonkulus, @k-taro56, @mhughdo, @tknickman, @shumakmanohar, @vordgi, @hamirmahal, @gaspar09, @JCharante, @sjoerdvanBommel, @mass2527, @N-Ziermann, @tordans, @davidthorand, @rmathew8-gh, @chriskrogh, @shogunsea, @auipga, @SukkaW, @agustints, @OXXD, @clarencepenz, @better-salmon, @808vita, @coltonehrman, @tksst, @hugo-syn, @JakobJingleheimer, @Willem-Jaap, @brandonnorsworthy, @jaehunn, @jridgewell, @gtjamesa, @mugi-uno, @kentobento, @vivianyentran, @empflow, @samennis1, @mkcy3, @suhaotian, @imevanc, @d3lm, @amannn, @hallatore, @Dylan700, @mpsq, @mdio, @christianvuerings, @karlhorky, @simonhaenisch, @olci34, @zce, @LavaToaster, @rishabhpoddar, @jirihofman, @codercor, @devjiwonchoi, @JackieLi565, @thoushif, @pkellner, @jpfifer, @quisido, @tomfa, @raphaelbadia, @j9141997, @hongaar, @MadCcc, @luismulinari, @dumb-programmer, @nonoakij, @franky47, @robbertstevens, @bryndyment, @marcosmartini, @functino, @Anisi, @AdonisAgelis, @seangray-dev, @prkagrawal, @heloineto, @kn327, @ihommani, @MrNiceRicee, @falsepopsky, @thomasballinger, @tmilewski, @Vadman97, @dnhn, @RodrigoTomeES, @sadikkuzu, @gffuma, @Schniz, @joulev, @Athrun-Judah, @rasvanjaya21, @rashidul0405, @nguyenbry, @Mwimwii, @molebox, @mrr11k, @philwolstenholme, @IgorKowalczyk, @Zoe-Bot, @HanCiHu, @JackHowa, @goncy, @hirotomoyamada, @pveyes, @yeskunall, @ChendayUP, @hmaesta, @ajz003, @its-kunal, @joelhooks, @blurrah, @tariknh, @Vinlock, @Nayeem-XTREME, @aziyatali, @aspehler, и @moka-ayumu.