Проект получил название vinext (произносится “ви-некст”) - это полная переработка Next.js на базе сборщика Vite, которая обеспечивает совместимость с 94% API Next.js 16. Результат превзошел все ожидания: скорость сборки приложений увеличилась до 4 раз, а размер клиентских пакетов сократился на 57%.

Финансовые затраты составили всего $1100 - именно столько было потрачено на API-токены Claude для более чем 800 сессий взаимодействия с ИИ. Для сравнения: традиционная разработка подобного проекта потребовала бы команду из нескольких инженеров и несколько месяцев или даже лет работы.

Почему это важно для бизнеса и индустрии разработки

Проблема развертывания Next.js в serverless-среде

Next.js остается самым популярным фреймворком для React - миллионы разработчиков используют его для создания веб-приложений. Однако при развертывании вне платформы Vercel возникают серьезные проблемы. Next.js использует собственный инструмент Turbopack для сборки, и для запуска на Cloudflare, Netlify или AWS Lambda необходимо преобразовывать результат сборки в формат, совместимый с целевой платформой.

Существующее решение OpenNext, созданное для решения этой проблемы, работает по принципу адаптации выходных данных Next.js. Это приводит к нестабильности: каждое обновление Next.js вызывает непредсказуемые изменения, требующие постоянной коррекции. Как отмечают в Cloudflare, это превращается в “игру в whack-a-mole” - постоянную борьбу с возникающими проблемами.

Экономическая эффективность AI-разработки

Эксперимент vinext демонстрирует фундаментальное изменение экономики разработки программного обеспечения. Затраты в $1100 на создание полноценной альтернативы фреймворку, над которым годами работала команда Vercel, показывают, что стоимость создания ПО кардинально изменилась .

Для бизнеса это означает:

• Сокращение времени выхода на рынок - проекты, которые раньше требовали месяцев разработки, теперь могут быть реализованы за недели
• Снижение затрат на разработку - вместо команды из 5-10 инженеров достаточно одного специалиста с AI-ассистентом
• Возможность быстрой модернизации - устаревшие системы могут быть переписаны с минимальными затратами

Влияние на индустрию веб-разработки

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

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

Технические характеристики vinext: как это работает

Архитектура на базе Vite

Vinext - это не обертка над Next.js, а альтернативная реализация API на базе Vite. Vite стал стандартом де-факто для современных веб-фреймворков, powering Astro, SvelteKit, Nuxt и Remix.

Ключевые компоненты архитектуры:

Система маршрутизации

• Поддержка обоих роутеров: Pages Router и App Router
• Файловая система маршрутизации с горячей перезагрузкой
• Динамические маршруты [param], catch-all [...slug], опциональные [[...slug]]
• Группы маршрутов (group), параллельные маршруты @slot, перехватывающие маршруты

Server-Side Rendering (SSR)

• Для Pages Router: потоковая передача, поддержка _app/_document, гидратация
• Для App Router: RSC (React Server Components) пайплайн, вложенные лейауты, потоковая передача
• Поддержка всех методов получения данных: getStaticProps, getStaticPaths, getServerSideProps

React Server Components
Vinext использует плагин @vitejs/plugin-rsc для поддержки RSC, что позволило реализовать полноценную работу с директивами "use client" и "use server" без создания собственной реализации с нуля.

Совместимость с Next.js API

Проект обеспечивает 94% покрытие API Next.js 16. Рассмотрим основные категории:

Модули next/*
Все 33 модуля Next.js переписаны как Vite-совместимые shim-модули:

Модуль	Статус	Возможности
next/link	Полная	Prefetch, onNavigate, восстановление скролла, basePath, locale
next/image	🟡 Частичная	Remote images через @unpic/react (28 CDN), без build-time оптимизации
next/router / next/navigation	Полная	Все хуки, клиентская навигация, SSR контекст
next/server	Полная	NextRequest, NextResponse, cookies, userAgent, after
next/headers	Полная	Асинхронные headers(), cookies(), draftMode()
next/dynamic	Полная	ssr: true/false, loading компонент
next/font/google	🟡 Частичная	Runtime CDN загрузка, без self-hosting
next/cache	Полная	revalidateTag, revalidatePath, cacheHandler, “use cache”

Серверные функции

• ISR (Incremental Static Regeneration) - работает из коробки
• Server Actions ("use server") - полная поддержка
• Metadata API - metadata, generateMetadata, viewport
• Middleware - поддержка middleware.ts и proxy.ts (Next.js 16)

Конфигурация

• Полная поддержка next.config.js/.ts/.mjs
• Rewrites, redirects, headers со всеми фазами
• Переменные окружения (.env файлы) с правильным приоритетом загрузки

Что НЕ поддерживается (осознанные исключения)

Cloudflare четко обозначил, какие функции не будут реализованы:

1. Vercel-специфичные функции - @vercel/og edge runtime, Vercel Analytics, Vercel KV/Blob/Postgres bindings
2. AMP - устарел с Next.js 13
3. Конфигурация Turbopack/webpack - vinext работает на Vite
4. next/jest - рекомендуется использовать Vitest
5. Bug-for-bug parity с недокументированным поведением

Производительность: детальное сравнение с Next.js

Методология тестирования

Cloudflare опубликовал детальную методологию бенчмарков на benchmarks.vinext.workers.dev . Тестирование проводится на каждом merge в main через GitHub CI.

Тестовое приложение: 33 маршрута App Router с server components, client components, динамическими роутами, вложенными layouts и API routes.

Важный нюанс: для честного сравнения в Next.js отключена статическая пре-рендеризация (используется export const dynamic = "force-dynamic"), чтобы измерить именно скорость компиляции и бандлинга, а не разницу в подходах к рендерингу .

Результаты бенчмарков

Время production-сборки:

Актуальные данные (на 2 марта 2026):

• Next.js 16 (Turbopack): 5.04s
• vinext (Rolldown): 1.59s - в 3.2 раза быстрее

Размер клиентских бандлов (gzip):

Холодный старт dev-сервера:

• Next.js 16: 2.71s
• vinext (Rollup): 1.85s - 1.5x быстрее
• vinext (Rolldown): 1.89s - 1.4x быстрее

Потребление памяти (Peak RSS):

• Next.js 16: 673 MB
• vinext (Rollup): 444 MB
• vinext (Rolldown): 548 MB

Почему vinext быстрее и легче

Анализ build output показывает два основных фактора различия в размере бандлов :

1. Tree-shaking (удаление мертвого кода)
Vite/Rollup производит более агрессивную элиминацию мертвого кода. Bundle React+ReactDOM в vinext значительно меньше благодаря лучшему tree-shaking Rollup по сравнению с Turbopack. Это составляет примерно половину общей разницы в размере .

2. Overhead фреймворка
Next.js включает больше клиентской инфраструктуры: роутер, runtime loader Turbopack, prefetching, обработка ошибок. Vinext имеет более легкий client runtime .

Оба фреймворка поставляют одинаковый код приложения и одинаковый RSC client runtime (react-server-dom-webpack). Разница заключается в том, сколько внутренних компонентов React переживает tree-shaking и сколько framework plumbing добавляет каждый инструмент .

Структурные преимущества архитектуры Vite

Vite 8 с Rolldown (Rust-based bundler) имеет структурные преимущества для производительности сборки, которые четко проявляются в бенчмарках :

• Параллелизация: и Turbopack, и Rolldown распараллеливают работу по всем ядрам, но Rolldown на Rust показывает лучшую эффективность
• Кэширование: Vite’s dependency optimizer cache ускоряет повторные сборки
• Нативный ESM: Vite использует нативные ES модули браузера для dev-сервера, что обеспечивает мгновенный старт

Процесс разработки: как один инженер с ИИ создал фреймворк за неделю

Хронология проекта

13 февраля 2026 - первый коммит в репозиторий [[9]].

День 1 (вечер):

• Базовый SSR работает для обоих роутеров (Pages и App)
• Реализованы middleware, server actions, streaming

День 2 (к вечеру):

• App Router Playground рендерит 10 из 11 роутов

День 3:

• Команда vinext deploy развертывает приложения на Cloudflare Workers с полной клиентской гидратацией [[9]]

Дни 4-7:

• Укрепление кода (hardening)
• Исправление edge cases
• Расширение тестового покрытия до 94% API

Методология работы с ИИ

Процесс разработки включал несколько этапов:

1. Архитектурное планирование (2 часа)
Инженер провел несколько часов в диалоге с Claude в OpenCode для определения архитектуры:

• Что строить
• В каком порядке
• Какие абстракции использовать

Этот план стал “северной звездой” - ориентиром для всей дальнейшей работы .

2. Итеративная разработка
Рабочий процесс выглядел так:

1. Определить задачу ("реализовать next/navigation shim 
   с usePathname, useSearchParams, useRouter")
2. ИИ пишет реализацию и тесты
3. Запуск тестового набора
4. Если тесты проходят → merge
   Если тесты не проходят → дать ИИ вывод ошибок 
   → позволить ИИ итерировать
5. Повторить

3. Автоматизированный code review

• При открытии PR ИИ-агент проводил ревью
• При получении комментариев другой агент их обрабатывал
• Обратная связь была в основном автоматизированной

4. Инструменты

• OpenCode: более 800 сессий
• agent-browser: для browser-level тестирования (рендеринг, клиентская навигация, гидратация)
• Claude Code: основная модель для генерации кода

Роль человека в AI-разработке

Важно понимать: почти каждая строка кода написана ИИ, но человек контролировал процесс.

Что делал инженер:

• Архитектурные решения
• Приоритизация задач
• Корректировка курса, когда ИИ шел в неверном направлении
• Понимание, когда ИИ уверенно реализовывал что-то неверное

Что делал ИИ:

• Генерация кода
• Написание тестов
• Исправление ошибок по результатам тестов
• Первичный code review

Как отмечают в Cloudflare: “Когда вы даете ИИ хорошее направление, хороший контекст и хорошие guardrails, он может быть очень продуктивным. Но человек все еще должен рулить”.

Почему этот проект стал возможен именно сейчас

Cloudflare выделил четыре критических фактора, которые совпали во времени :

1. Next.js хорошо специфицирован

• Обширная документация
• Массивная пользовательская база
  -Years Stack Overflow ответов и туториалов
• API surface присутствует в тренировочных данных

Когда вы просите Claude реализовать getServerSideProps или объяснить как работает useRouter, он не галлюцинирует - он знает, как работает Next.js .

2. У Next.js есть комплексный тестовый набор
Репозиторий Next.js содержит тысячи E2E тестов, покрывающих каждую фичу и edge case. Cloudflare портировал тесты напрямую из их набора (с атрибуцией в коде). Это дало механическую спецификацию для верификации .

3. Vite - отличная основа
Vite обрабатывает сложные части фронтенд-тулинга:

• Быстрый HMR (Hot Module Replacement)
• Нативный ESM
• Чистый plugin API
• Production bundling

Не пришлось писать bundler с нуля - нужно было только “научить его говорить на Next.js”.

4. Модели догнали сложность
“Мы не думаем, что это было бы возможно даже несколько месяцев назад. Более ранние модели не могли поддерживать целостность в кодовой базе такого размера. Новые модели могут удерживать полную архитектуру в контексте, рассуждать о взаимодействии модулей и достаточно часто производить корректный код для поддержания темпа”.

Развертывание и интеграция: от разработки до production

Cloudflare Workers как первый класс развертывания

Vinext создан с Cloudflare Workers в качестве первого deployment target. Одна команда превращает исходный код в работающий Worker:

vinext deploy

Это автоматически:

• Собирает приложение
• Авто-генерирует конфигурацию Worker
• Развертывает на Workers

Поддержка Cloudflare Bindings

Vinext предоставляет нативный доступ ко всем Cloudflare bindings через специальный импорт:

import { env } from "cloudflare:workers";

export default async function Page() {
  const result = await env.DB.prepare("SELECT * FROM posts").all();
  return <div>{JSON.stringify(result)}</div>;
}

Это работает потому, что @cloudflare/vite-plugin запускает RSC environment в workerd, где cloudflare:workers - нативный модуль [[9]].

Поддерживаемые типы bindings:

• D1 (базы данных)
• R2 (объектное хранилище)
• KV (key-value хранилище)
• Durable Objects
• AI bindings
• Queues
• Vectorize
• Browser Rendering

Не нужны обходные пути: не требуется getPlatformProxy(), кастомный worker entry с fetch(request, env) или другие workaround’ы .

Traffic-aware Pre-Rendering (TPR) - инновационный подход

Cloudflare представил экспериментальную функцию Traffic-aware Pre-Rendering, которая решает проблему долгих сборок в Next.js .

Проблема Next.js:
Next.js пре-рендерит каждую страницу, указанную в generateStaticParams(), во время сборки. Сайт с 10,000 продуктовых страниц = 10,000 рендеров при сборке, даже если 99% страниц никогда не получат запрос. Сборка масштабируется линейно с количеством страниц - поэтому большие Next.js сайты имеют 30-минутные сборки .

Решение TPR:
Cloudflare уже является reverse proxy для вашего сайта. У них есть данные о трафике. Они знают, какие страницы реально посещают. Vinext запрашивает Cloudflare zone analytics при деплое и пре-рендерит только страницы, которые имеют значение .

vinext deploy --experimental-tpr

Building...
Build complete (4.2s)

TPR (experimental): Analyzing traffic for my-store.com (last 24h)
TPR: 12,847 unique paths — 184 pages cover 90% of traffic
TPR: Pre-rendering 184 pages...
TPR: Pre-rendered 184 pages in 8.3s → KV cache

Deploying to Cloudflare Workers...

Для сайта со 100,000 продуктовых страниц power law означает, что 90% трафика обычно приходится на 50-200 страниц. Они пре-рендерятся за секунды. Все остальное fallback’ится на on-demand SSR и кэшируется через ISR после первого запроса.

Мульти-платформенность через Nitro

Хотя Cloudflare Workers - основной target, vinext может развертываться на любой платформе через Nitro Vite plugin.

Поддерживаемые платформы:

• Vercel (auto-detection в CI, или NITRO_PRESET=vercel)
• Netlify (auto-detection, или NITRO_PRESET=netlify)
• AWS Amplify (NITRO_PRESET=aws_amplify)
• Deno Deploy (NITRO_PRESET=deno_deploy)
• Node.js server (NITRO_PRESET=node)

Cloudflare отмечает, что proof-of-concept для Vercel был поднят менее чем за 30 минут .

Тестирование и качество: как обеспечивается надежность

Комплексный тестовый набор

Несмотря на то, что код написан ИИ, проект имеет те же gate’ы качества, что и human-written code:

Unit и интеграционные тесты:

• 1,700+ Vitest тестов
• Тесты портированы из Next.js test suite
• Тесты из OpenNext Cloudflare conformance suite

E2E тесты:

• 380 Playwright E2E тестов
• 5 проектов для разных сценариев
• Pages Router (dev + production)
• App Router (dev)
• Оба роутера на Cloudflare Workers через wrangler dev

Статический анализ:

• TypeScript type checking через tsgo
• Linting через oxlint
• CI запускает все тесты на каждом pull request

Верификация через реальные приложения

Cloudflare использует Vercel’s App Router Playground как integration test - он работает на vinext и доступен по адресу app-router-playground.vinext.workers.dev.

Также развернуты живые примеры:

• Hacker News clone - HN клон с App Router и RSC
• Nextra Docs - документация с MDX
• RealWorld API - REST API routes
• Benchmarks Dashboard - дашборд производительности

Production использование

Несмотря на experimental статус, vinext уже используется в production:

National Design Studio работает над модернизацией правительственных интерфейсов и использует vinext на одном из своих beta-сайтов - CIO.gov. Они отмечают значительное улучшение времени сборки и размера бандлов .

Known limitations - честность о недостатках

Cloudflare четко документирует известные ограничения:

Оптимизация изображений:

• Remote images работают через @unpic/react (авто-детект 28 CDN)
• Local images маршрутизируются через /_vinext/image endpoint
• В production на Cloudflare Workers можно resize/transcode через Images binding
• Нет build-time оптимизации или статического ресайзинга

Google Fonts:

• Загружаются из CDN, не self-hosted
• Нет size-adjust fallback font metrics
• Local fonts работают, но @font-face CSS инжектится runtime, не извлекается при сборке

useSelectedLayoutSegment(s):

• Derives segments из pathname, не truly layout-aware
• Может отличаться от Next.js в edge cases с parallel routes

Node.js production server:

• vinext start работает для тестирования
• Менее полный, чем Workers deployment
• Cloudflare Workers - primary target

Native Node modules:

• sharp, resvg, satori, lightningcss, @napi-rs/canvas крашат Vite’s RSC dev environment
• В production builds работают
• При vinext deploy auto-stubbed

Влияние на будущее разработки программного обеспечения

Переосмысление абстракций в ПО

Стив Фаулкер из Cloudflare поднял фундаментальный вопрос: “Почему у нас так много слоев в стеке?” .

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

ИИ не имеет того же ограничения. Он может удержать всю систему в контексте и просто написать код. Ему не нужен промежуточный фреймворк для организации. Ему нужна только спецификация и основа для строительства .

“Пока не ясно, какие абстракции действительно фундаментальны, а какие были просто костылями для человеческой когниции. Эта граница будет сильно смещаться в ближайшие годы. Но vinext - это data point. Мы взяли API contract, build tool и AI model, и ИИ написал все между ними. Никакого промежуточного фреймворка не потребовалось” .

AI перепишет коммерческий open source

Newsletter Pragmatic Engineer отмечает, что эксперимент Cloudflare - это признак того, как ИИ нарушит существующие коммерческие open source проекты .

Next.js от Vercel - коммерческий продукт с облачной платформой. Vinext показывает, что API surface можно переписать за неделю с минимальными затратами. Это создает прецедент для “освобождения” других популярных фреймворков от vendor lock-in .

Изменение роли разработчика

Эксперимент демонстрирует сдвиг в роли разработчика:

Традиционная разработка:

• Разработчик пишет код
• Тратит время на boilerplate
• Борется с сложностью больших кодовых баз

AI-ассистированная разработка:

• Разработчик определяет архитектуру
• ИИ генерирует код
• Разработчик валидирует через тесты
• Фокус на high-level решениях, не implementation details

Как отмечают в Cloudflare: “Если один инженер может потратить $1100 в токенах и переписать Next.js, вы можете потратить $10 и мигрировать на Vite-based фреймворк” .

Практическое применение: как начать использовать vinext

Быстрый старт

Vinext включает Agent Skill для автоматической миграции. Работает с Claude Code, OpenCode, Cursor, Codex и десятками других AI coding tools:

# Установить skill
npx skills add cloudflare/vinext

# В вашем Next.js проекте
migrate this project to vinext

Skill обрабатывает:

• Проверку совместимости
• Установку зависимостей
• Генерацию конфига
• Запуск dev сервера
• Флаги о том, что требует ручного внимания

Ручная миграция

npm install vinext

# В package.json заменить next на vinext:
{
  "scripts": {
    "dev": "vinext dev",
    "build": "vinext build",
    "start": "vinext start"
  }
}

# Использовать
vinext dev          # Dev server с HMR
vinext build        # Production сборка
vinext deploy       # Сборка и деплой на Cloudflare Workers

Vinext auto-detects ваш app/ или pages/ directory, загружает next.config.js, и автоматически конфигурирует Vite. Ваши существующие директории pages/, app/, next.config.js, и public/ работают как есть .

Команды CLI

Опции для vinext deploy:

• --preview - деплой в preview environment
• --env <name> - target specific environment
• --experimental-tpr - включить Traffic-aware Pre-Rendering

Проверка совместимости

Перед миграцией рекомендуется запустить:

vinext check

Это просканирует проект на известные проблемы совместимости и покажет, что потребует изменений .

Текущий статус и дорожная карта

Experimental статус - что это значит

Cloudflare четко обозначил: vinext экспериментальный. Ему даже нет одной недели на момент анонса, и он не был battle-tested со значительным трафиком в масштабе.

README честен о том, что не поддерживается и не будет поддерживаться, о известных ограничениях. Cloudflare хочет быть upfront, а не overpromise .

Что в разработке

Приоритетные задачи:

1. Статический pre-rendering на build time (пока не поддерживается)
2. Улучшение поддержки Images binding для оптимизации изображений
3. Расширение покрытия API до 95%+
4. Native adapters для дополнительных платформ (помимо Cloudflare и Nitro)

Traffic-aware Pre-Rendering планируется сделать дефолтом после получения большего количества real-world тестирования .

Как сообщество может помочь

Vinext - open-source проект (MIT license) на GitHub: github.com/cloudflare/vinext .

Contributing:

• Issues и PRs приветствуются
• CI (lint, typecheck, Vitest, Playwright E2E) запускается автоматически
• First-time contributors требуют manual approval, последующие PRs идут без вмешательства
• Cloudflare employees могут push ветки в main repo для авто-деплоя preview

Reporting bugs:
Cloudflare рекомендует перед созданием issues попробовать направить AI agent на проблему:

“Откройте ваш проект с Claude Code, Cursor, OpenCode или чем вы пользуетесь, и попросите разобраться, почему ваше приложение не работает с vinext. В нашем опыте, агенты очень хороши в трассировке через vinext source, идентификации gaps или багов, и часто производят fix или хотя бы ясную диагностику. Issue, которое включает ‘вот что нашел агент’, значительно более actionably, чем ‘оно не работает’” .

Заключение: начало новой эры разработки

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

Ключевые выводы:

1. Экономическая эффективность: $1100 затрат против сотен тысяч долларов традиционной разработки
2. Производительность: 4x быстрее сборка, 57% меньше бандлы
3. Качество: 1,700+ тестов, 380 E2E тестов, 94% покрытие API
4. Практическая применимость: уже используется в production на CIO.gov

Более широкое значение:

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

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

Что дальше:

Cloudflare ищет партнеров среди других хостинг-провайдеров для адаптации toolchain для их клиентов (lift минимален - proof-of-concept на Vercel поднят за 30 минут) [[9]]. Это open-source проект, и для долгосрочного успеха важно работать с партнерами across the ecosystem.

Эксперимент vinext - это не просто техническая демонстрация. Это сигнал индустрии: стоимость создания ПО кардинально изменилась, и нам нужно переосмыслить, как мы строим программное обеспечение в эпоху ИИ.

Источники данных:

• Официальный блог Cloudflare: “How we rebuilt Next.js with AI in one week”
• GitHub репозиторий: github.com/cloudflare/vinext
• Benchmarks dashboard: benchmarks.vinext.workers.dev
• Анализ технического сообщества

Статус информации: Актуально на март 2026 года. Проект находится в активной разработке, характеристики могут меняться.

Примечание: Статья носит информационный характер. Vinext является экспериментальным проектом и требует осторожности при использовании в production.