Приложения Next.js на базе Vite: знакомство с Vinext 1.028.09.2026 17:51

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

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

Сегодня мы объявляем о выходе Vinext 1.0 — очередном шаге на нашем пути к тому, чтобы сделать возможным развертывание приложений Next.js где угодно. Vinext позволяет взять любое приложение Next.js (будь то Pages или App Router) и сделать его переносимым для развертывания на любой веб-платформе, включая бесплатный тариф Cloudflare Workers, Netlify или AWS Lambda.

Vinext 1.0 привносит масштабные улучшения совместимости, стабильности и механизмов кэширования, а также закладывает долгосрочный фундамент для проекта. Сейчас лучшее время, чтобы взять свой проект на Next.js и перенести его на Vinext; просто выполните npx vinext check и npx vinext init.

Переход на версию 1.0

На момент релиза Vinext подавал большие надежды, но был неполным. С тех пор мы потратили много времени как на улучшение совместимости с App Router, так и на ее распространение на приложения с Pages Router — мы знаем, что многие клиенты являются давними поклонниками последнего и имеют крупные приложения, миграция которых представляет собой сложную задачу. Мы не хотели, чтобы Vinext оставался инструментом, работающим только для тех, кто использует новейшие функции App Router.

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

Наша тестовая совместимость выросла более чем до 99% (за исключением компонентов кэша).

Это улучшение стало возможным благодаря нашему сообществу вокруг проекта на GitHub. Как только Vinext был запущен, это сообщество применило его к самым разным приложениям, чтобы выявить слабые места. Благодаря их внимательному анализу мы обнаружили проблемы, которые не были очевидны сразу в тестовом покрытии. Vinext должен работать точно так же, как Next.js. Недостаточно просто имитировать функции с теми же именами. Создать альтернативный import { revalidatePath } достаточно просто; сложность заключается в том, чтобы убедиться, что он корректно влияет на отрендеренные страницы, записи в кэше и будущие запросы.

Отслеживание запросов через приложение для обеспечения ожидаемого поведения Vinext — репликация не только API, но и логики работы этой системы — оказалось гораздо более сложной задачей.

После устранения проблем и внедрения новых функций крайне важно избегать регрессий, особенно если в Next.js происходят изменения. Именно поэтому мы также создали наш тестовый комплект: тысячи целевых тестов, охватывающих базовое поведение фреймворка для обоих роутеров, серверов разработки и продакшена, а также целевых платформ Node.js и Cloudflare Workers. Мы также каждую ночь запускаем набор комплексных (E2E) тестов Next.js для Vinext, что дает нам постоянное представление о нашей совместимости и позволяет мгновенно узнавать о регрессиях из влитых изменений. Наряду с автоматизированным тестированием мы напрямую работаем с крупными клиентами, использующими Vinext в продакшене, чтобы гарантировать отсутствие у них проблем.

Что нового в версии 1.0

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

• App Router, Pages Router и гибридные приложения: Мы услышали от клиентов, что Pages Router по-прежнему важен, а миграция — это не одномоментный процесс. Поэтому Vinext поддерживает оба варианта маршрутизации, включая React Server Components, Server Actions, маршруты API, обработчики маршрутов, middleware и клиентскую навигацию.
• Полный жизненный цикл страницы: Страницы могут рендериться самыми разными способами: на сервере, предварительно во время сборки, экспортироваться как статические адекватные ресурсы или кэшироваться с помощью ISR (Incremental Static Regeneration) на уровне страниц. Мы позаботились о том, чтобы фоновая ревалидация и ревалидация по требованию работали с любыми результатами вывода.
• Кэширование: Vinext имеет общий набор функций кэширования для App Router и Pages Router, а также поддерживаемых сред выполнения. У нас есть дополнительная поддержка использования кэша Workers от Cloudflare.
• Наблюдаемость (Observability): Vinext обеспечивает трассировку, совместимую с Next.js, для обоих роутеров, поэтому существующие настройки OpenTelemetry и Sentry продолжают работать. В Cloudflare Workers трассировки также интегрируются со встроенными средствами наблюдаемости Workers.
• Совместимость с экосистемой Next.js: Vinext реализует публичный интерфейс next/* и поддерживает распространенные паттерны Next для использования аутентификации, MDX, оптимизации изображений, шрифтов, метаданных, переменных окружения и многого другого.
• Первоклассная поддержка среды выполнения Workers: Хотя Vinext может работать где угодно, серверный код может выполняться в среде выполнения Cloudflare workerd как во время разработки, так и в продакшене, с прямым доступом к таким привязкам (bindings), как оптимизация изображений и Hyperdrive.

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

Когда мы общались с командами о том, какие функции важны для них, одна вещь привлекла особое внимание. В Next.js 16 было заявлено, что компоненты кэша (Cache Components) являются важной частью будущего фреймворка, и тем не менее большинство опрошенных нами команд их не использовали и не считали поддержку обязательным условием для перехода. Поэтому на сегодняшний день Vinext имеет ограниченную поддержку директивы use cache, управляющей компонентами кэша, и хотя мы продолжим улучшать совместимость в этой области, основное внимание мы уделяем вышеперечисленным приоритетам.

Предварительный рендеринг и прогрев кэша

Когда мы впервые анонсировали Vinext, он поддерживал инкрементальную статическую регенерацию (ISR) после первого запроса, но еще не рендерил страницы во время сборки. Приложения используют generateStaticParams () и getStaticPaths () для определения страниц, которые должны быть отрендерены при сборке, и ожидают, что ISR на уровне страниц свяжет эти первоначальные ответы с фоновой ревалидацией и ревалидацией по требованию.

Vinext 1.0 поддерживает этот жизненный цикл для обоих роутеров. Он может выполнять предварительный рендеринг маршрутов App Router и Pages Router во время сборки, отдавать эти ответы через ISR на уровне страниц и аннулировать их по пути или тегу. Он также поддерживает output: «export», если вам нужен полностью статический сайт.

Но это заставило нас задаться вопросом: почему этот рендеринг вообще должен происходить во время сборки?

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

Прогрев кэша (Cache warming) — это наше решение данной проблемы, переносящее предварительный рендеринг страниц с сервера сборки в сеть Cloudflare. Разработчики могут продолжать использовать примитивы Next.js для определения страниц под предварительный рендеринг, а Vinext может дополнительно выявлять высоконагруженные страницы для добавления в этот список. Это происходит в фоновом режиме до того, как ваш сайт будет развернут в продакшене, так что в самый момент развертывания он уже готов мгновенно отдавать ответы из кэша Cloudflare.

В процессе развертывания это работает путем загрузки новой версии воркера (Worker) и ее отправки на 0% продакшн-трафика с последующим запросом страниц именно из этой версии. Это позволяет конвейеру рендеринга отработать до того, как реальные пользователи столкнутся с новым деплоем. Как только кэши заполнены, деплой можно безопасно переводить в статус основного.

Что мы делаем дальше

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

Теперь проект сосредоточен на том, чтобы поддерживать фреймворк в актуальном состоянии со всем, что происходит в вышестоящем репозитории (upstream). В ветку canary Next.js каждый день поступают новые коммиты. Каждое утро агент просматривает изменения, получает дифы и открывает задачи отслеживания для всего, что может повлиять на Vinext. Каждую ночь матрица совместимости пересоздается по мере прогона набора тестов Next.js против Vinext.

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

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

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

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

Попробуйте в деле

Vinext доступен как для новых приложений, так и для существующих проектов на Next.js.

Создайте новое приложение сегодня:

npm create vinext-app@latest my-app

Или мигрируйте существующее приложение:

npx vinext check && npx vinext init

А затем разверните его на Cloudflare Workers, используя прогрев кэша:

npx @vinext/cloudflare deploy --warm-cache

Посетите vinext.dev для ознакомления с документацией, примерами и актуальной матрицей совместимости. Исходный код Vinext открыт и доступен на github.com/cloudflare/vinext. Мы приветствуем баг-репорты, пулл-реквесты, воспроизведения приложений и отзывы.

© Cloudflare Blog