vinext: Как Cloudflare Переписала Next.js с Помощью ИИ за 1 Неделю — И Победила

Иногда, разворачивая приложение Next.js на Cloudflare Workers и сталкиваясь с ошибками несовместимости OpenNext с новыми версиями Next.js, я задумывался:

«Зачем все эти обходные пути? Next.js создает выходные данные, затем OpenNext должен выполнить обратную инженерию, чтобы запустить их на Workers… Разве нет более прямого способа?»

Оказалось, не только я так думал. Команда Cloudflare тоже. И они решили сделать нечто безумное:

Полностью переписать фреймворк Next.js с нуля, но на этот раз используя Vite, и развернуть его на Workers нативно, всего за 1 неделю.

Звучит неправдоподобно, не так ли? Фреймворк, который десятки инженеров Vercel разрабатывали годами, теперь будет переписан одним инженером с помощью ИИ за 7 дней?

Затраты: 1100 долларов на токены OpenAI.

Результат: vinext — полноценная замена Next.js, собирающаяся в 4.4 раза быстрее, с бандлом на 57% меньше, и уже использующаяся клиентами в продакшене.

В этой статье я расскажу эту историю и извлеченные уроки о разработке с помощью ИИ, которые нам всем необходимо знать.

Исходная проблема: Next.js имеет «проблему развертывания»

Next.js популярен, но развертывание… это другое дело

Next.js — самый популярный фреймворк React. Миллионы разработчиков используют его. Опыт разработки отличный.

Но есть одна проблема:

При развертывании Next.js на бессерверных платформах (Cloudflare, Netlify, AWS Lambda) приходится:

1. Next.js собирает приложение с помощью Turbopack → создает выходные данные в своем собственном формате.
2. OpenNext считывает эти выходные данные → выполняет обратную инженерию → изменяет их форму.
3. Только после этого можно развернуть приложение на платформе.

Представьте себе это так:

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

Это запутанно, подвержено ошибкам и требует больших усилий по поддержке.

OpenNext: Временное, но хрупкое решение

OpenNext был создан для решения этой проблемы. Он работает, но:

• Обратная инженерия выходных данных Next.js → каждая новая версия Next.js требует обновления.
• Отсутствие официального API → зависимость от деталей реализации.
• Игра «ударь крота» → исправишь одну ошибку, тут же появляется другая.

Cloudflare внесла значительный вклад в OpenNext. Но они осознали:

«Строить на основе выходных данных Next.js — это неустойчивая основа. Нужен другой подход.»

Команда Next.js также знает об этой проблеме и работает над API адаптеров. Но:

• Они по-прежнему строят на Turbopack (собственный инструментарий).
• next dev работает только на Node.js.
• Невозможно тестировать платформоспецифичные API (Durable Objects, KV…) в режиме разработки.

Именно тогда возник безумный вопрос:

Что, если… переписать API Next.js на Vite?

Идея: Не адаптировать выходные данные, а переписать API

Вместо:

Next.js (Turbopack) → Выходные данные сборки → OpenNext меняет форму → Развертывание

Сделать так:

vinext (Vite) → Выходные данные сборки → Нативное развертывание

Полностью переписать всю поверхность API Next.js:

• Маршрутизация (App Router + Pages Router)
• Рендеринг на сервере (SSR)
• Компоненты сервера React (RSC)
• Серверные действия (Server Actions)
• Промежуточное ПО (Middleware)
• Кэширование

Но на этот раз собрать непосредственно на Vite.

Почему Vite?

Vite — это инструмент сборки, используемый большинством во фронтенд-экосистеме за исключением Next.js:

• Astro
• SvelteKit
• Nuxt
• Remix

Vite имеет:

• Быстрый HMR (Hot Module Replacement)
• Поддержку нативного ESM
• Чистый Plugin API
• Vite Environment API → для работы на любой платформе

Самое главное: @vitejs/plugin-rsc уже имеет поддержку React Server Components.

Так что оставалось только написать плагин Vite, реализующий API Next.js. Готово!

vinext: Результаты после 1 недели работы с ИИ

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

Cloudflare протестировала приложение с 33 маршрутами (App Router), сравнив Next.js 16.1.6 с vinext:

Время сборки для продакшена:

Фреймворк	Время сборки	по сравнению с Next.js
Next.js 16.1.6 (Turbopack)	7.38 с	базовая линия
vinext (Vite 7 / Rollup)	4.64 с	в 1.6 раза быстрее
vinext (Vite 8 / Rolldown)	1.67 с	в 4.4 раза быстрее

Размер клиентского бандла (gzipped):

Фреймворк	Gzipped	по сравнению с Next.js
Next.js 16.1.6	168.9 КБ	базовая линия
vinext (Rollup)	74.0 КБ	на 56% меньше
vinext (Rolldown)	72.9 КБ	на 57% меньше

Объяснение:

• Архитектура Vite/Rollup имеет структурные преимущества.
• Rolldown (бандлер на Rust в Vite 8) чрезвычайно быстр.
• Лучшее древовидное удаление (tree-shaking) → меньший размер бандла.

Совместимость: 94% поверхности API Next.js

vinext поддерживает:

• App Router
• Pages Router
• Server Components (RSC)
• Server Actions
• Middleware
• Динамические маршруты
• API маршруты
• ISR (Incremental Static Regeneration)

Покрытие тестами:

• Более 1700 Vitest тестов
• 380 Playwright E2E тестов
• Тесты перенесены из тестового набора Next.js.
• 94% покрытие API.

Пока не поддерживается:

• Статический пререндеринг во время сборки (generateStaticParams).
• Некоторые пограничные случаи.

Но этого достаточно для работы в продакшене.

Развертывание на Cloudflare Workers: Одна команда

npm install vinext
vinext deploy

Да, всего одна команда.

vinext был разработан с учетом Cloudflare Workers как первоклассной цели развертывания:

vinext dev
vinext build
vinext deploy

Что особенно:

vinext dev запускается в среде выполнения workerd (среда выполнения Cloudflare Workers), а не Node.js.

Это означает:

• Возможность тестирования Durable Objects, KV, привязок AI прямо в режиме разработки.
• Нет необходимости в обходных путях getPlatformProxy().
• Среда разработки идентична производственной среде.

import { KVCacheHandler } from 'vinext/cloudflare';
import { setCacheHandler } from 'next/cache';

setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));

Гибкая стратегия кэширования:

• По умолчанию: Cloudflare KV (для ISR).
• Возможность замены: R2, Cache API или собственный бэкенд.

Traffic-aware Pre-Rendering (TPR): Новая инновация

Проблема с традиционным статическим пререндерингом

Next.js поддерживает пререндеринг статических страниц во время сборки:

export async function generateStaticParams() {
  return [
    { id: '1' }, { id: '2' }, ... , { id: '10000' }
  ];
}

Проблема:

• Сайт с 10 000 страниц товаров → необходимо отрендерить 10 000 страниц во время сборки.
• Время сборки увеличивается линейно с количеством страниц.
• Крупные сайты могут собираться 30 минут, а то и 1 час.
• 99% страниц никогда не посещаются.

Решение vinext: Traffic-aware Pre-Rendering (TPR)

Идея проста, но гениальна:

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

vinext deploy --experimental-tpr

  Building...
  Build complete (4.2s)

  TPR: 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...

Рабочий процесс:

1. Анализирует трафик сайта (за последние 24 часа).
2. Находит страницы, на которые приходится 90% трафика (обычно всего 50-200 страниц).
3. Пререндерит только эти страницы.
4. Остальные страницы → SSR по запросу + кэш ISR.

Преимущества:

• Быстрое время сборки (секунды вместо минут).
• Не требуется generateStaticParams().
• Не требуется привязка к производственной базе данных.
• Вирусные страницы автоматически подхватываются при следующем развертывании.

Это настоящая инновация в подходе к статической генерации.

Как они переписали Next.js с помощью ИИ?

Контекст: Это был «невозможный» проект для команды людей

Переписать Next.js — это не шутки:

• 2 системы маршрутизации (App Router + Pages Router).
• 33+ заглушки модулей (next/navigation, next/headers, next/cache…).
• Конвейер рендеринга на сервере.
• Потоковая передача RSC.
• Промежуточное ПО.
• Уровень кэширования.
• Статический экспорт.

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

Cloudflare тоже пробовала однажды и потерпела неудачу.

На этот раз все по-другому: ИИ стал достаточно хорош.

Почему этот проект «создан для ИИ»?

Не каждый проект подходит для ИИ. vinext отличается потому, что:

1. Next.js очень хорошо задокументирован

• Полная официальная документация.
• Миллионы руководств, ответов на Stack Overflow.
• Четкая поверхность API.
• Большие языковые модели (LLM) были обучены на этих данных.

2. Next.js имеет подробный набор тестов

• Тысячи E2E-тестов в репозитории.
• vinext переносит тесты непосредственно из репозитория Next.js.
• Тесты = живая спецификация.

3. Vite — отличная основа

• Не нужно создавать бандлер с нуля.
• HMR, производственная сборка уже есть.
• @vitejs/plugin-rsc для поддержки RSC.

4. Модель достаточно хороша (конец 2025 года)

• Claude Opus 4.5, GPT-4.5 могут поддерживать согласованность в большой кодовой базе.
• Возможности рассуждений достаточны для понимания архитектуры.
• При необходимости могут погружаться во внутренние механизмы Next.js, Vite, React.

Все эти факторы должны были совпасть одновременно.

Рабочий процесс: Человек управляет, ИИ исполняет

Начальная настройка (2 часа):

• Определение архитектуры с помощью Claude в OpenCode.
• Принятие решения о том, какие абстракции использовать.
• Планирование порядка реализации.

Цикл реализации:

1. Определение задачи
   «Реализовать заглушку next/navigation с usePathname, useSearchParams»

2. ИИ пишет реализацию + тесты

3. Запуск набора тестов

4. Если тест пройден → слияние
   Если тест провален → дать ИИ вывод ошибки, позволить ему итерировать

5. Повторение

Контроль качества (автоматический):

• 1700+ Vitest тестов.
• 380 Playwright E2E тестов.
• Проверка типов TypeScript (tsgo).
• Линтинг (oxlint).
• CI запускает все это для каждого PR.

ИИ-агенты проверяют код:

• PR открыт → агент проверяет.
• Комментарии к проверке → другой агент их устраняет.
• Цикл обратной связи в основном автоматизирован.

Роль человека:

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

Метрики проекта

• Сроки: 13-20 февраля 2026 г. (7 дней).
• Участники: 1 инженер + ИИ.
• Сессии OpenCode: 800+.
• Стоимость: ~1100 долларов на токены API.
• Покрытие тестами: 1700 модульных тестов + 380 E2E тестов.
• Покрытие API: 94% поверхности Next.js.

Первый коммит: 13 февраля, вечер.

• Базовый SSR работает для App Router и Pages Router.
• Middleware, Server Actions, потоковая передача.

День 2: App Router Playground рендерит 10 из 11 маршрутов.

День 3: vinext deploy развертывает приложения на Workers.

Дни 4-7: Усиление, пограничные случаи, покрытие тестами.

УРОКИ: Разработка с помощью ИИ в 2026 году

Урок 1: ИИ готов к задачам «переимплементации»

Переимплементация отличается от инновации:

• Четкая спецификация (API Next.js — это спецификация).
• Комплексный набор тестов (тесты Next.js).
• Существующая основа (Vite).

→ Идеальное место для ИИ.

Когда стоит использовать ИИ для крупных проектов:

• Хорошо определенная поверхность API.
• Комплексный набор тестов.
• Хорошая документация.
• Надежные базовые библиотеки.

Когда еще не стоит:

• Неопределенные требования.
• Отсутствие тестов.
• Создание всего с нуля.
• Плохо задокументированная область.

Урок 2: Контроль качества важнее, чем «ИИ пишет красивый код»

ИИ пишет код, но он должен пройти через контрольные точки:

• Тесты (модульные + E2E).
• Проверка типов.
• Линтинг.
• CI.

Без контрольных точек → код ИИ будет отклоняться и накапливать ошибки.

«Каждая строка проходит те же контрольные точки качества, которые вы ожидаете от человеческого кода.»

Урок 3: Стоимость разработки программного обеспечения изменилась

Раньше:

• Команда из 5-10 инженеров.
• Срок 6-12 месяцев.
• Стоимость: зарплаты, инфраструктура, накладные расходы.

Сейчас:

• 1 инженер + ИИ.
• Срок 1 неделя.
• Стоимость: 1100 долларов на токены.

Стоимость программного обеспечения снизилась в 100 раз для определенных типов проектов.

Урок 4: Абстракции существуют из-за человеческих ограничений

Глубокий вопрос, который задал инженер Cloudflare:

«Почему в стеке так много слоев?»

Ответ: Потому что людям нужна помощь.

• Невозможно удержать всю систему в голове.
• Нужны абстракции для управления сложностью.
• Каждый слой облегчает работу следующему.

ИИ отличается:

• Может удерживать всю систему в контексте.
• Не нуждается в промежуточных абстракциях.
• Нужны только спецификация + основа.

Будущее:

«Многие абстракции, которые мы строим, больше не понадобятся. Они просто костыли для человеческого познания.»

vinext — это подтверждение: ИИ пишет код напрямую из контракта API + инструмента сборки, без необходимости в промежуточном фреймворке.

Урок 5: Человек по-прежнему критически важен для принятия решений

ИИ отлично пишет код. Но:

• Архитектурные решения → Человек.
• Приоритизация → Человек.
• Продуктовые решения (идея Traffic-aware Pre-Rendering) → Человек.
• Корректировка курса → Человек.

«ИИ — это инструмент, который делает 1 инженера в 10 раз продуктивнее, а не замена инженерам.»

Будущее: Фреймворки как «командный спорт»

vinext не только для Cloudflare

95% кода vinext — это чистый Vite, не специфичный для Cloudflare.

Cloudflare работает с другими хостинг-провайдерами над внедрением vinext для их клиентов:

• Netlify
• AWS Lambda
• Vercel (иронично, но возможно)

Доказательство: Cloudflare запустила vinext на Vercel менее чем за 30 минут.

Причина:

• Vite Environment API → платформенно-независимый.
• Адаптация vinext для новой платформы очень проста.
• Проект с открытым исходным кодом, PR приветствуются.

Видение:

Единый инструментарий, развертываемый на любой платформе.

Формирование экосистемы

Примеры использования:

Удалены рекламные примеры.

Agent Skill для миграции:

npx skills add cloudflare/vinext

Откройте проект Next.js, скажите ИИ:

'migrate this project to vinext'

Навык автоматически:

• Проверяет совместимость.
• Устанавливает зависимости.
• Генерирует конфигурацию.
• Запускает сервер разработки.

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

npx vinext init    
npx vinext dev     
npx vinext deploy  

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

2026 год: Год, когда ИИ перейдет от «помощника в кодировании» к «партнеру по реализации»

vinext — это не просто новый фреймворк.

Он доказывает, что:

1. ИИ может создавать производственное программное обеспечение

• Не просто исправлять ошибки, писать вспомогательные функции.
• А создавать целые системы с тысячами строк кода.
• С качеством, достаточным для продакшена.

2. Скорость разработки программного обеспечения фундаментально изменилась

• Работа, которая раньше занимала 6 месяцев, теперь занимает 1 неделю.
• Работа, для которой требовалась команда из 10 человек, теперь требует 1 человека.

3. Фокус сместится с «написания кода» на «проектирование систем»

• Инженеры будут сосредоточены на:
  • Архитектурных решениях.
  • Требованиях к продукту.
  • Контроле качества.
  • Пользовательском опыте.
• ИИ будет заниматься деталями реализации.

4. Открытый исходный код будет бурно развиваться

• Стоимость создания библиотек, фреймворков значительно снизится.
• Больше экспериментов.
• Больше инноваций.
• Более быстрая итерация.

Не все будет создано ИИ

ИИ хорош для:

• Переимплементации с четкой спецификацией.
• Переноса кода между языками/фреймворками.
• Создания инструментов, библиотек с комплексными тестами.
• Шаблонов, каркасов.

ИИ пока не хорош для:

• Новых исследований (нет данных для обучения).
• Неопределенных, меняющихся требований.
• Проектов, требующих высокой креативности и дизайна.
• Отладки проблем в продакшене (требуется реальный контекст).

Человек + ИИ дополняют друг друга, а не заменяют.

Заключение: Перестроить, Переосмыслить, Переизобрести

vinext не просто решает проблему развертывания Next.js.

Он показывает нам:

1. Технически: Можно создавать программное обеспечение на уровне фреймворка с помощью ИИ.

2. Экономически: Стоимость разработки программного обеспечения фундаментально изменилась.

3. Философски: Многие абстракции, которые мы используем, существуют только из-за человеческих ограничений.

Вопрос к вам:

Если 1 инженер + ИИ могут переписать Next.js за 1 неделю с бюджетом в 1100 долларов…

Насколько быстрее может быть ваш текущий проект?

В 2026 году ИИ — это уже не просто помощник. Это настоящий товарищ по команде.

Используйте его правильно. И помните: Человек по-прежнему принимает стратегические решения, ИИ — высокоскоростной исполнитель.

Надеюсь, эта статья помогла вам лучше понять vinext и будущее разработки с помощью ИИ. Если интересно, попробуйте vinext для своего побочного проекта!