Next.js 12.1 | Next.js Русский

Мы рады представить одну из самых востребованных функций в Next.js 12.1:

ISR по запросу (бета): Мгновенное обновление страниц с использованием getStaticProps.
Расширенная поддержка SWC: styled-components, Relay и многое другое.
Плагин next/jest: Поддержка Jest с нулевой конфигурацией с использованием SWC.
Быстрая минификация с SWC (RC): В 7 раз быстрее, чем Terser.
Улучшения для самостоятельного хостинга: Docker-образы на ~80% меньше.
React 18 и серверные компоненты (альфа): Улучшенная стабильность и поддержка.
Опрос разработчиков: Помогите нам улучшить Next.js своим мнением.

Обновитесь сегодня, выполнив npm i next@latest.

ISR по запросу (бета)

Next.js теперь предоставляет функцию unstable_revalidate(), позволяющую обновлять отдельные страницы, использующие getStaticProps. Это одна из самых востребованных функций с момента появления инкрементальной статической регенерации (ISR) в Next.js 9.5.

С момента выхода ISR такие компании, как Tripadvisor, Parachute, HashiCorp и другие, значительно сократили время сборки, сохраняя при этом высокую производительность. Однако мы учли ваши отзывы о регенерации по интервалам и рады предложить больше гибкости.

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

Это упрощает обновление вашего сайта в случаях, когда:

Создается или обновляется контент из вашей headless CMS
Изменяются метаданные электронной коммерции (цена, описание, категория, отзывы и т. д.)

pages/api/revalidate.js

export default async function handler(req, res) {
  // Проверка секретного токена для подтверждения запроса
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Неверный токен' });
  }
 
  try {
    await res.unstable_revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // При ошибке Next.js продолжит показывать
    // последнюю успешно сгенерированную страницу
    return res.status(500).send('Ошибка при регенерации');
  }
}

В getStaticProps вам не нужно указывать revalidate для использования регенерации по запросу. Если revalidate опущен, Next.js будет использовать значение по умолчанию false (без регенерации) и обновлять страницу только по запросу при вызове unstable_revalidate().

Инкрементальная статическая регенерация работает для всех провайдеров, поддерживающих Next.js Build API (next build). Начиная с сегодняшнего дня при развертывании на Vercel регенерация по запросу распространяется глобально за ~300 мс при отправке страниц на edge.

Посмотрите наше демо, чтобы увидеть регенерацию по запросу в действии и оставить отзыв. Svix (готовые к работе webhooks) и Clerk (аутентификация) также создали демо ISR по запросу.

Улучшенная поддержка SWC

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

В версии 12.1 мы добавили поддержку в компилятор Next.js для:

С добавлением этих шести преобразований мы перенесли самые распространенные плагины Babel в Rust с использованием нового компилятора. Если вы хотите увидеть другие плагины, сообщите нам в обсуждении. Кроме того, мы работаем над системой высокопроизводительных WebAssembly-плагинов, реализованных через SWC.

Плагин Jest с нулевой конфигурацией

Next.js теперь автоматически настраивает Jest (next/jest) с использованием компилятора Next.js на Rust для преобразования файлов, включая:

Автоматическое мокирование таблиц стилей (.css, .module.css и их .scss вариантов) и импортов изображений
Загрузку .env (и всех вариантов) в process.env
Игнорирование node_modules при разрешении и преобразовании тестов
Игнорирование .next при разрешении тестов
Загрузку next.config.js для флагов, включающих преобразования компилятора Next.js

Ознакомьтесь с документацией или начните с нашего примера Jest.

Быстрая минификация с SWC

В Next.js 12 мы представили минификацию с использованием SWC как часть компилятора Next.js. Первые результаты показали, что она в 7 раз быстрее, чем Terser. Минификация с SWC теперь находится в стадии Release Candidate (RC) в версии 12.1 и станет стандартной в 12.2.

Вы можете включить использование SWC для минификации в next.config.js:

next.config.js

module.exports = {
  swcMinify: true,
};

Оставьте свой отзыв в обсуждении.

Быстрая оптимизация изображений

Встроенный API оптимизации изображений был обновлен для поддержки того же шаблона, что и страницы ISR, где изображения отдаются устаревшими и регенерируются в фоновом режиме (также известный как stale-while-revalidate).

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

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

Next.js теперь может автоматически создавать папку standalone, копирующую только необходимые файлы для production-развертываний. Это привело к уменьшению Docker-образов на ~80% для самостоятельно размещаемых приложений Next.js.

Чтобы воспользоваться этим автоматическим копированием, включите его в вашем next.config.js:

next.config.js

module.exports = {
  experimental: {
    outputStandalone: true,
  },
};

Это создаст папку .next/standalone, которую затем можно развернуть самостоятельно без установки node_modules.

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

React 18, серверные компоненты и потоковый SSR (альфа)

Как было показано на Next.js Conf, мы работаем над внедрением React 18, серверного Suspense, потокового SSR и в конечном итоге серверных компонентов в Next.js.

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

Для разработчиков, следящих за переходом серверных компонентов из альфы в бета-версию в Next.js, вот некоторые из последних обновлений:

Мы работаем над тем, чтобы вы могли запускать все приложение Next.js с серверным рендерингом на Edge. Вы сможете выбирать, какие страницы должны использовать Edge Runtime, что позволит постепенно переносить страницы с Node.js по мере готовности.

Скоро мы выпустим еще один пост с более подробной информацией о Edge Runtime. Оба наших демо (next-server-components и next-rsc-demo) были обновлены с учетом последних изменений.

Другие исправления ошибок и улучшения

Использование <a> с target="blank" больше не вызывает предупреждения ESLint о необходимости использования next/link.
Файлы .d.ts больше не считаются страницами.
document.title теперь имеет приоритет над h1 при объявлении изменений страниц для скринридеров.
Создание pages/index/[...dynamic].js теперь работает, что ранее было невозможно из-за того, что index является зарезервированным ключевым словом.
При использовании dynamic(() => import('./some-component'), { ssr: false }) импорт будет автоматически удален из серверного кода (tree-shaken).
Для уменьшения размера установки и повышения безопасности мы работаем над предварительной компиляцией большего количества зависимостей. Последнее добавление — node-fetch.
Улучшения для Fast Refresh при использовании Middleware.
Поддержка ESLint 8 с нашей встроенной интеграцией ESLint.
styled-jsx обновлен до версии 5.0, включая новые полезные ссылки на ошибки для всех ошибок компиляции styled-jsx.
Edge Runtime: Поддержка AbortController и AbortSignal.
Edge Runtime: Добавлены CryptoKey и globalThis.CryptoKey.
Крупные приложения Next.js теперь видят улучшение времени Fast Refresh на ~60% благодаря последним улучшениям (при перезагрузке более 1000 модулей).
Теперь показывается уведомление, если Fast Refresh завершается неудачно и вызывает полную перезагрузку страницы.
Объявление маршрутов теперь корректно пропускает объявление начальной загрузки страницы при использовании строгого режима React 18.
Мы сократили количество открытых вопросов почти на 300 в репозитории Next.js по сравнению с декабрем 2021 года (решено почти 1000 вопросов).

Опрос разработчиков Next.js

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

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

Ваши ответы будут полностью анонимными, хотя вы можете по желанию поделиться с нами URL-адресами своих приложений.

Спасибо за помощь в улучшении Next.js!

Благодарности участникам

Next.js — это результат совместной работы более 2000 индивидуальных разработчиков, отраслевых партнеров, таких как Google и Facebook, и нашей основной команды.

Чтобы упростить вклад, мы перенесли репозиторий Next.js на использование Turborepo для улучшения производительности сборки. Мы также добавили шаблоны для тестов и ссылки на ошибки, чтобы упростить начало написания тестов. Наконец, мы записали 40-минутное видео, показывающее, как внести вклад в Next.js.

Этот релиз стал возможен благодаря вкладу: @MaedahBatool, @mutebg, @sokra, @huozhi, @hanford, @shuding, @sean6bucks, @jameshfisher, @devknoll, @yuta-ike, @zh-lx, @amandeepmittal, @alunyov, @stefanprobst, @leerob, @balazsorban44, @kdy1, @brittanyrw, @jord1e, @kara, @vvo, @ismaelrumzan, @dlindenkreuz, @MohammadxAli, @nguyenyou, @thibautsabot, @hanneslund, @vertti, @KateKate, @stefee, @mikinovation, @Leticijak, @mohsen1, @ncphillips, @ehowey, @lancechentw, @krychaxp, @fmacherey, @pklawansky, @RyanClementsHax, @lakbychance, @sannajammeh, @oliviertassinari, @alexander-akait, @u-yas, @Cheprer, @msp5382, @chrispat, @getspooky, @Ryz0nd, @klaasman, @midgleyc, @kumard3, @jesstelford, @neeraj3029, @glenngijsberts, @pie6k, @wouterraateland, @timneutkens, @11koukou, @thesyedbasim, @aeneasr, @ijjk, @lfades, @JuniorTour, @xavhan, @mattyocode, @padmaia, @Skn0tt, @gwer, @Nutlope, @styfle, @stipsan, @xhoantran, @eolme, @sespinosa, @zenorocha, @hjaber, @benmvp, @T-O-R-U-S, @dburrows, @atcastle, @kiriny, @molebox, @Vienio99, @kyliau, @PepijnSenders, @krystofex, @PizzaPete, @souljuse, @Schniz, @Nelsonfrank, @Mhmdrza, @hideokamoto-stripe, @Emrin, @gr-qft, @delbaoliveira, @redbar0n, @lxy-yz, @Divlo, @kachkaev, @teleaziz, @OgbeniHMMD, @goncy, @bennettdams, @hsynlms, @callumgare, @jonrosner, @karaggeorge, @rpie3, @MartijnHols, @bashunaimiroy, @NOCELL, @rishabhpoddar, @omariosouto, @theMosaad, @javivelasco, @pierrenel, @lobsterkatie, @tharakabimal, @saevarb, @nbouvrette, @paulnbrd, @ecklf, @renbaoshuo, @chozzz, @tbezman, @karlhorky, @j-mendez, @ffan0811, @arthurfiorette, @chimit, @joperron, @moh12594, @rasmusjp, @bryanrsmith, @TrySound, @josharsh, @thecrypticace, @arturparkhisenko, @segheysens, @thevinter, @AryanBeezadhur, @xiaohp, @tknickman, @oriolcp, @smakosh, @jorrit, @mix3d, @Clecio013, @michielvangendt, @intergalacticspacehighway, @jbraithwaite, @marcelocarmona, @benmerckx, @haykerman, @steven-tey, @jaredpalmer, @pi-guy-in-the-sky, @JuanM04, @apollisa, @D-Pagey, @Kikobeats, @ramosbugs, @dan-weaver, @chris-stytch, @MikevPeeren, @janpio, @emw3, @nubpro, @cmdcolin, @joostdecock, @sgallese, @housseindjirdeh, @minervabot, @cjboco, @Ryuurock, @dm430, @mkarkachov, @nvh95, @gfortaine, @zifeo, @vicente-s, @Rohithgilla12, @brookton, @skirsten, @davidfateh, @DavidBabel, @mannybecerra, @pveyes, @kaykdm, @xhiroga, @mzaien, @losfair, @ykzts, @knezevicdev, @yang-feng-yfeng, @xuchaobei, @elkevinwolf, @fabienheureux, @nilskaspersson, @Andarist, @mathcrln, @dferber90, @FranciscoMoretti, @benschwarz, @wendellhu95, @gazdagergo, @imabp, @ljosberinn, @samuliasmala, @ka2jun8, @monsonjeremy, @pqt, @leoortizz, @michel-kraemer, @ntkoopman, @iicdii, @chentsulin, @ericmatthys, @lennym, @balogunkeji, @wnr, @chemicalkosek, @KittyGiraudel, @OKinane, @KonstHardy, @BrandonRomano, @furcan, @dusanralic, @elliottsj, @hi-ogawa, @panva, @genetschneider, @thundermiracle, @stefano-rainieri, @ericbiewener, @vordgi, @stevejarvis, @ihmpavel, @matamatanot, @dyarfaradj, @iheyunfei, @ascorbic, @fytriht, @emzoumpo, @onurtemiz, @a-ursino, @mxschmitt, @bywo, @OArnarsson, @TurekBot, @gish, @vadymshymko, @kamsar, @skhaz, @Prashoon123, @IrisvanOllefen, @evan-bradley, @ntltd, @EzequielDM, @oBusk, @martpie, @BruceRodrigues, @luke-h1, @lucasvazq, @velocity23, @AkiraTsuboi, @mitheelgajare, @JamiesWhiteShirt, @leroydev, @JulienZD, @leotaku, @mattfwood и @kripod.