Back to Articles
AI Development
Feb 24, 202610 min read

How Cloudflare Rebuilt Next.js with AI in One Week

One engineer and an AI model rebuilt the most popular front-end framework from scratch. vinext is a drop-in Next.js replacement built on Vite that deploys to Cloudflare Workers—4x faster builds, 57% smaller bundles, and it cost about $1,100 in tokens.

How Cloudflare Rebuilt Next.js with AI in One Week

Last week, one engineer and an AI model rebuilt the most popular front-end framework from scratch. The result, vinext (pronounced 'vee-next'), is a drop-in replacement for Next.js built on Vite that deploys to Cloudflare Workers with a single command. In early benchmarks, it builds production apps up to 4x faster and produces client bundles up to 57% smaller. The whole thing cost about $1,100 in tokens.

The Next.js Deployment Problem

Next.js is the most popular React framework. Millions of developers use it. It powers a huge chunk of the production web, and for good reason—the developer experience is top-notch. But Next.js has a deployment problem when used in the broader serverless ecosystem.

The tooling is entirely bespoke. Next.js has invested heavily in Turbopack, but if you want to deploy to Cloudflare, Netlify, or AWS Lambda, you have to take that build output and reshape it into something the target platform can actually run. OpenNext was built to solve this, and a lot of engineering effort has gone into it from multiple providers including Cloudflare. It works, but quickly runs into limitations—building on top of Next.js output has proven difficult and fragile because OpenNext has to reverse-engineer the build output, resulting in unpredictable changes between versions.

Introducing vinext

What if instead of adapting Next.js output, we reimplemented the Next.js API surface on Vite directly? Vite is the build tool used by most of the front-end ecosystem outside of Next.js, powering frameworks like Astro, SvelteKit, Nuxt, and Remix. A clean reimplementation, not merely a wrapper or adapter. Cloudflare honestly didn't think it would work. But it's 2026, and the cost of building software has completely changed.

Replace next with vinext in your scripts and everything else stays the same. Your existing app/, pages/, and next.config.js work as-is.

npm install vinext

vinext dev          # Development server with HMR
vinext build        # Production build
vinext deploy       # Build and deploy to Cloudflare Workers

This is not a wrapper around Next.js and Turbopack output. It's an alternative implementation of the API surface: routing, server rendering, React Server Components, server actions, caching, middleware. All of it built on top of Vite as a plugin. Most importantly, Vite output runs on any platform thanks to the Vite Environment API.

The Numbers

Early benchmarks are promising. Cloudflare compared vinext against Next.js 16 using a shared 33-route App Router application. Both frameworks do the same work: compiling, bundling, and preparing server-rendered routes.

Production build time: Next.js 16.1.6 (Turbopack) at 7.38s baseline; vinext (Vite 7 / Rollup) at 4.64s (1.6x faster); vinext (Vite 8 / Rolldown) at 1.67s (4.4x faster).

Client bundle size (gzipped): Next.js 16.1.6 at 168.9 KB baseline; vinext (Rollup) at 74.0 KB (56% smaller); vinext (Rolldown) at 72.9 KB (57% smaller).

Vite's architecture, and especially Rolldown (the Rust-based bundler coming in Vite 8), has structural advantages for build performance that show up clearly here.

Deploying to Cloudflare Workers

vinext is built with Cloudflare Workers as the first deployment target. A single command takes you from source code to a running Worker. Both the App Router and Pages Router work on Workers, with full client-side hydration, interactive components, client-side navigation, and React state.

For production caching, vinext includes a Cloudflare KV cache handler that gives you ISR (Incremental Static Regeneration) out of the box:

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

setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));

Traffic-aware Pre-Rendering

Next.js pre-renders every page listed in generateStaticParams() during the build. A site with 10,000 product pages means 10,000 renders at build time, even though 99% may never receive a request. vinext introduces Traffic-aware Pre-Rendering (TPR)—it queries Cloudflare's zone analytics at deploy time and pre-renders only the pages that actually get visited. For a site with 100,000 product pages, 90% of traffic usually goes to 50–200 pages. Those get pre-rendered in seconds. Everything else falls back to on-demand SSR and gets cached via ISR after the first request.

Taking on the Next.js Challenge with AI

A project like this would normally take a team of engineers months, if not years. Several teams at various companies have attempted it. Cloudflare tried once before. Two routers, 33+ module shims, server rendering pipelines, RSC streaming, file-system routing, middleware, caching, static export—there's a reason nobody had pulled it off. This time they did it in under a week. One engineer directing AI.

The first commit landed on February 13. By the end of that evening, both the Pages Router and App Router had basic SSR working, along with middleware, server actions, and streaming. By the next afternoon, App Router Playground was rendering 10 of 11 routes. By day three, vinext deploy was shipping apps to Cloudflare Workers with full client hydration. The rest of the week was hardening: fixing edge cases, expanding the test suite, bringing API coverage to 94%.

Why This Problem Is Made for AI

Next.js is well-specified—extensive documentation, massive user base, years of Stack Overflow answers. The API surface is all over the training data. Next.js has an elaborate test suite with thousands of E2E tests; Cloudflare ported tests directly from their suite. Vite is an excellent foundation—it handles the hard parts of front-end tooling. And the models caught up. Earlier models couldn't sustain coherence across a codebase this size. New models can hold the full architecture in context and produce correct code often enough to keep momentum going.

How They Actually Built It

Almost every line of code in vinext was written by AI. But every line passes the same quality gates you'd expect from human-written code: 1,700+ Vitest tests, 380 Playwright E2E tests, full TypeScript type checking, and linting. The workflow was straightforward: define a task, let the AI write the implementation and tests, run the test suite, iterate if needed. AI agents handled code review too. Over the course of the project, they ran over 800 sessions in OpenCode. Total cost: roughly $1,100 in Claude API tokens.

What This Means for Software

Most abstractions in software exist because humans need help. We couldn't hold the whole system in our heads, so we built layers to manage complexity. AI doesn't have the same limitation. It can hold the whole system in context and just write the code. It doesn't need an intermediate framework to stay organized—it just needs a spec and a foundation to build on. It's not clear yet which abstractions are truly foundational and which were crutches for human cognition. That line is going to shift a lot over the next few years.

Try It

vinext includes an Agent Skill that handles migration. Install it and tell the AI to migrate:

npx skills add cloudflare/vinext
# Then: migrate this project to vinext

Or do it by hand: npx vinext init, npx vinext dev, npx vinext deploy. The source is at github.com/cloudflare/vinext. vinext is experimental—proceed with appropriate caution for production—but early results from real-world customers like National Design Studio (CIO.gov) are encouraging.

Read the full article: https://blog.cloudflare.com/vinext/

Key Insight

AI doesn't need intermediate frameworks to stay organized—it can hold the whole system in context and write the code. With a well-documented API, comprehensive tests, and a solid build tool, one engineer directing AI rebuilt Next.js in under a week.

Share this article