Skip to content

Cloudflare — How we rebuilt Next.js with AI in one week

Summary

Cloudflare engineering manager Sunil Pai (one engineer + Claude via OpenCode) rebuilt the Next.js API surface from scratch on top of Vite as a drop-in replacement called vinext (github.com/cloudflare/vinext), in under one week, for roughly $1,100 in Claude API tokens across 800+ OpenCode sessions. Deploys to Cloudflare Workers with a single vinext deploy command. Early benchmarks on a 33-route App Router fixture: 1.6× / 4.4× faster production builds (Rollup / Rolldown vs. Next.js 16 + Turbopack) and 56 % / 57 % smaller gzipped client bundles. 94 % API coverage of Next.js 16; 1,700+ Vitest + 380 Playwright E2E tests, many ported from Next.js's own suite. Introduces Traffic-aware Pre-Rendering (TPR) — a novel Cloudflare-edge-exclusive approach that replaces generateStaticParams() build-time enumeration with edge-analytics-driven pre-rendering of only the URLs that actually receive traffic, resolving the build-time-scales-linearly-with-page-count pathology of large static sites.

Key takeaways

  1. Clean reimplementation of a well-specified API, not an adapter. Cloudflare (and others) previously tried to make Next.js run on Workers via OpenNext, which reverse-engineers Turbopack's build output — "a difficult and fragile approach" that becomes "a game of whack-a-mole" across Next.js versions. vinext instead reimplements routing, SSR, RSC, server actions, caching, middleware directly as a Vite plugin — patterns/clean-reimplementation-over-adapter. (Source: this post)

  2. ~95 % of vinext is pure Vite — routing, module shims, SSR pipeline, RSC integration, none of it Cloudflare- specific. A proof-of-concept deploy on Vercel took "less than 30 minutes." Vite's Environment API means Vite output runs on any platform — PRs from other hosting providers are explicitly welcomed.

  3. Benchmarks (33-route App Router fixture, force-dynamic, TypeScript + ESLint disabled in Next.js to measure bundler only):

Framework Build time Gzipped bundle
Next.js 16.1.6 (Turbopack) 7.38 s (baseline) 168.9 KB
vinext (Vite 7 / Rollup) 4.64 s (1.6×) 74.0 KB (56 % smaller)
vinext (Vite 8 / Rolldown) 1.67 s (4.4×) 72.9 KB (57 % smaller)

Methodology + historical results public at benchmarks.vinext.workers.dev. "Take them as directional, not definitive."

  1. Traffic-aware Pre-Rendering (TPR, experimental --experimental-tpr flag) is the post's most original system-design contribution. "Cloudflare is already the reverse proxy for your site. We have your traffic data. We know which pages actually get visited." At deploy time vinext queries Cloudflare zone analytics and pre-renders only the URLs covering 90 % of traffic ("50 to 200 pages" for a 100 k-product-page site by power law). Everything else falls back to on-demand SSR + ISR-cache after first request. Resolves build time scales linearly with generateStaticParams() without coupling the build to the production database. Canonical wiki instance of patterns/traffic-aware-prerendering.

  2. Production caching via KV KVCacheHandler, pluggable by design. setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE)) delivers ISR out of the box; swap in R2 for large cached payloads, or the forthcoming Cache-API-based alternative.

  3. AI workflow was the unlock. Prior attempts ("several teams at various companies have attempted it … we tried once at Cloudflare!") failed due to scope — two routers, 33+ module shims, SSR + RSC streaming, file-system routing, middleware, caching, static export. What changed: (a) Next.js is well-specified (massive training data footprint, "Claude doesn't hallucinate" on Next.js API shape); (b) Next.js has an elaborate test suite giving a verifiable specification (tests ported from the Next.js repo); (c) Vite is an excellent foundation (HMR, plugins, @vitejs/plugin-rsc); (d) state-of-the-art models can hold the full architecture in context. Canonical wiki instance of concepts/ai-assisted-codebase-rewrite + patterns/ai-driven-framework-rewrite.

  4. AI guardrails were critical. "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

  5. 380 Playwright E2E tests; full TS type checking via tsgo; linting via oxlint; CI runs all of it on every PR. AI-agent code review on PRs; second agent addresses review comments. Browser-level testing via agent-browser caught hydration + client-navigation issues unit tests missed. "The human still has to steer."

  6. Migration is an Agent Skill shipped with vinext: npx skills add cloudflare/vinext → "migrate this project to vinext" in any supported coding tool (Claude Code, OpenCode, Cursor, Codex, …). Handles compatibility check, dependency install, config generation, dev-server startup. Canonical instance of patterns/migration-as-agent-skill.

  7. Honest about maturity + gaps. "vinext is experimental. It's not even one week old … proceed with appropriate caution." Static pre-rendering at build time (Next.js's generateStaticParams() path) is not yet supported — on the roadmap. Post explicitly recommends Astro (also Vite-based, also Workers-deployable) for 100 %-static- content sites.

  8. Thesis on abstraction layering. "Most abstractions in software exist because humans need help. … 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." vinext is framed as a data point for abstraction-as-human-crutch — an API contract (Next.js)

    • a foundation (Vite) + a capable model produced the rest, with no intermediate framework needed.

Systems introduced

Systems extended

  • systems/nextjs — vinext is the target-API reimplementation; post makes the well-specified target API property explicit.
  • systems/opennext — vinext is the structural alternative to OpenNext's adapter approach.
  • systems/cloudflare-workers — vinext's primary deployment target; vinext deploy handles config + deploy.
  • systems/cloudflare-kv — production cache substrate via KVCacheHandler.
  • systems/opencode — the coding-agent harness in which 800+ sessions ran; canonical wiki instance of OpenCode as a codebase-rewrite substrate.
  • systems/claude-code — AI model + tool family; the model improvements ("can hold the full architecture in context") are the explicit enabling condition.
  • systems/astro — recommended alternative for 100 %-static sites.

Concepts introduced

Patterns introduced

  • patterns/traffic-aware-prerendering — edge-analytics- driven pre-render-only-high-traffic-URLs pattern.
  • patterns/clean-reimplementation-over-adapter — when an adapter-over-reverse-engineered-output approach becomes unsustainable, a clean reimplementation against the published API surface on a shared foundation is the alternative.
  • patterns/ai-driven-framework-rewrite — the preconditions (well-specified target, comprehensive test suite, solid foundation, capable model, human steering) and workflow (plan → task → implement + test → merge-on-green → iterate) that made a one-week rewrite tractable.
  • patterns/migration-as-agent-skill — ship migration as an Agent Skill that runs inside any supported coding tool, not as a human-written codemod script.
  • patterns/pluggable-cache-handler — setCacheHandler(impl) lets the framework's caching layer accept any backend (KV / R2 / Cache API / custom), letting the deployment pick the right storage trade-off.

Operational numbers

  • Cost: ~$1,100 in Claude API tokens.
  • Sessions: 800+ in OpenCode over the project.
  • Duration: first commit 2026-02-13; basic App + Pages Router SSR + middleware + server actions + streaming same evening; App Router Playground rendering 10/11 routes by day 2 afternoon; vinext deploy shipping to Workers by day 3; remainder of the week spent hardening.
  • API coverage: 94 % of Next.js 16 API surface.
  • Tests: 1,700+ Vitest unit tests; 380 Playwright E2E tests; tests ported from Next.js repo + OpenNext's Cloudflare conformance suite.
  • Build time (33-route fixture): 7.38 s (Turbopack) → 4.64 s (Rollup, 1.6×) → 1.67 s (Rolldown, 4.4×).
  • Bundle size (33-route fixture, gzipped): 168.9 KB → 74.0 KB (Rollup, 56 % smaller) → 72.9 KB (Rolldown, 57 % smaller).
  • First production customer: National Design Studio running CIO.gov in production at publication time.
  • TPR illustrative numbers: 100 k product pages → ~50-200 pages cover 90 % of traffic → pre-render those in seconds; 12,847 unique paths / 184 pages / 90 % coverage / 8.3 s pre-render in the post's example deploy log.

Caveats

  • Experimental + one-week-old. Post itself advises caution for production use.
  • Benchmark fixture is a single 33-route App Router app, not representative of all production applications. Next.js was configured with TypeScript + ESLint disabled and force-dynamic to isolate bundler + compilation time; real Next.js builds include those costs.
  • Static pre-rendering at build time not yet supported — generateStaticParams()-style enumeration is on roadmap. Sites that are 100 % pre-built static HTML won't benefit today; post recommends Astro for that workload.
  • TPR is experimental, --experimental-tpr flag; Cloudflare-specific (depends on zone analytics); "we plan to make it the default once we have more real-world testing behind it."
  • Cloudflare Workers is the only first-class deployment target today. Vercel PoC (~30 min) shows the path for other hosts but is not production-ready.
  • @vitejs/plugin-rsc is explicitly early days — the fact that it existed at all was a "dealbreaker"-avoiding piece of luck.
  • AI-driven rewrite preconditions are narrow: well- specified target + comprehensive test suite + solid foundation + capable model. "Take any one of them away and this doesn't work nearly as well." Not a general software-engineering methodology.
  • No production-scale traffic numbers disclosed for vinext itself (only benchmark fixtures + named customer).
  • Known limitations + what's not supported and won't be documented in the repo; post explicitly points readers there rather than papering over gaps.

Source

Last updated · 200 distilled / 1,178 read