How we rebuilt Subsequent.js with AI in a single week

_{*This put up was up to date at 12:35 pm PT to repair a typo within the construct time benchmarks.}

Final week, one engineer and an AI mannequin rebuilt the most well-liked front-end framework from scratch. The end result, vinext (pronounced “vee-next”), is a drop-in substitute for Subsequent.js, constructed on Vite, that deploys to Cloudflare Staff with a single command. In early benchmarks, it builds manufacturing apps as much as 4x quicker and produces shopper bundles as much as 57% smaller. And we have already got clients operating it in manufacturing. 

The entire thing value about $1,100 in tokens.

Subsequent.js is the most well-liked React framework. Hundreds of thousands of builders use it. It powers an enormous chunk of the manufacturing net, and for good cause. The developer expertise is top-notch.

However Subsequent.js has a deployment drawback when used within the broader serverless ecosystem. The tooling is totally bespoke: Subsequent.js has invested closely in Turbopack however if you wish to deploy it to Cloudflare, Netlify, or AWS Lambda, it’s important to take that construct output and reshape it into one thing the goal platform can truly run.

When you’re pondering: “Isn’t that what OpenNext does?”, you’re right. 

That’s certainly the issue OpenNext was constructed to resolve. And plenty of engineering effort has gone into OpenNext from a number of suppliers, together with us at Cloudflare. It really works, however shortly runs into limitations and turns into a recreation of whack-a-mole. 

Constructing on prime of Subsequent.js output as a basis has confirmed to be a troublesome and fragile strategy. As a result of OpenNext has to reverse-engineer Subsequent.js’s construct output, this leads to unpredictable modifications between variations that take plenty of work to right. 

Subsequent.js has been engaged on a first-class adapters API, and we have been collaborating with them on it. It is nonetheless an early effort however even with adapters, you are still constructing on the bespoke Turbopack toolchain. And adapters solely cowl construct and deploy. Throughout improvement, subsequent dev runs solely in Node.js with no approach to plug in a special runtime. In case your software makes use of platform-specific APIs like Sturdy Objects, KV, or AI bindings, you may’t take a look at that code in dev with out workarounds.

What if as an alternative of adapting Subsequent.js output, we reimplemented the Subsequent.js API floor on Vite straight? Vite is the construct software utilized by a lot of the front-end ecosystem exterior of Subsequent.js, powering frameworks like Astro, SvelteKit, Nuxt, and Remix. A clear reimplementation, not merely a wrapper or adapter. We actually did not assume it could work. However it’s 2026, and the price of constructing software program has utterly modified.

We bought loads additional than we anticipated.

npm set up vinext

Change subsequent with vinext in your scripts and every part else stays the identical. Your present app/, pages/, and subsequent.config.js work as-is.

vinext dev          # Improvement server with HMR
vinext construct        # Manufacturing construct
vinext deploy       # Construct and deploy to Cloudflare Staff

This isn’t a wrapper round Subsequent.js and Turbopack output. It is an alternate implementation of the API floor: routing, server rendering, React Server Parts, server actions, caching, middleware. All of it constructed on prime of Vite as a plugin. Most significantly Vite output runs on any platform due to the Vite Surroundings API.

Early benchmarks are promising. We in contrast vinext towards Subsequent.js 16 utilizing a shared 33-route App Router software.

Each frameworks are doing the identical work: compiling, bundling, and making ready server-rendered routes. We disabled TypeScript sort checking and ESLint in Subsequent.js’s construct (Vite would not run these throughout builds), and used force-dynamic so Subsequent.js would not spend additional time pre-rendering static routes, which might unfairly decelerate its numbers. The purpose was to measure solely bundler and compilation velocity, nothing else. Benchmarks run on GitHub CI on each merge to essential.

Manufacturing construct time:

Shopper bundle measurement (gzipped):

These benchmarks measure compilation and bundling velocity, not manufacturing serving efficiency. The take a look at fixture is a single 33-route app, not a consultant pattern of all manufacturing purposes. We count on these numbers to evolve as three tasks proceed to develop. The full methodology and historic outcomes are public. Take them as directional, not definitive.

The route is encouraging, although. Vite’s structure, and particularly Rolldown (the Rust-based bundler coming in Vite 8), has structural benefits for construct efficiency that present up clearly right here.

vinext is constructed with Cloudflare Staff as the primary deployment goal. A single command takes you from supply code to a operating Employee:

vinext deploy

This handles every part: builds the appliance, auto-generates the Employee configuration, and deploys. Each the App Router and Pages Router work on Staff, with full client-side hydration, interactive elements, client-side navigation, React state.

For manufacturing caching, vinext features a Cloudflare KV cache handler that offers you ISR (Incremental Static Regeneration) out of the field:

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

setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));

KV is an effective default for many purposes, however the caching layer is designed to be pluggable. That setCacheHandler name means you may swap in no matter backend is smart. R2 is likely to be a greater match for apps with massive cached payloads or completely different entry patterns. We’re additionally engaged on enhancements to our Cache API that ought to present a robust caching layer with much less configuration. The purpose is flexibility: choose the caching technique that matches your app.

Stay examples operating proper now:

We even have a reside instance of Cloudflare Brokers operating in a Subsequent.js app, with out the necessity for workarounds like getPlatformProxy, for the reason that whole app now runs in workerd, throughout each dev and deploy phases. This implies with the ability to use Sturdy Objects, AI bindings, and each different Cloudflare-specific service with out compromise. Take a look right here.

The present deployment goal is Cloudflare Staff, however that is a small a part of the image. One thing like 95% of vinext is pure Vite. The routing, the module shims, the SSR pipeline, the RSC integration: none of it’s Cloudflare-specific.

Cloudflare is seeking to work with different internet hosting suppliers about adopting this toolchain for his or her clients (the raise is minimal — we bought a proof-of-concept engaged on Vercel in lower than half-hour!). That is an open-source venture, and for its long run success, we imagine it’s vital we work with companions throughout the ecosystem to make sure ongoing funding. PRs from different platforms are welcome. When you’re serious about including a deployment goal, open a difficulty or attain out.

We wish to be clear: vinext is experimental. It is not even one week previous, and it has not but been battle-tested with any significant site visitors at scale. When you’re evaluating it for a manufacturing software, proceed with applicable warning.

That stated, the take a look at suite is in depth: over 1,700 Vitest exams and 380 Playwright E2E exams, together with exams ported straight from the Subsequent.js take a look at suite and OpenNext’s Cloudflare conformance suite. We’ve verified it towards the Subsequent.js App Router Playground. Protection sits at 94% of the Subsequent.js 16 API floor.

Early outcomes from real-world clients are encouraging. We have been working with Nationwide Design Studio, a group that is aiming to modernize each authorities interface, on one among their beta websites, CIO.gov. They’re already operating vinext in manufacturing, with significant enhancements in construct instances and bundle sizes.

The README is sincere about what’s not supported and will not be, and about recognized limitations. We wish to be upfront somewhat than overpromise.

vinext already helps Incremental Static Regeneration (ISR) out of the field. After the primary request to any web page, it is cached and revalidated within the background, similar to Subsequent.js. That half works immediately.

vinext doesn’t but assist static pre-rendering at construct time. In Subsequent.js, pages with out dynamic information get rendered throughout subsequent construct and served as static HTML. In case you have dynamic routes, you employ generateStaticParams() to enumerate which pages to construct forward of time. vinext would not try this… but.

This was an intentional design choice for launch. It is on the roadmap, but when your website is 100% prebuilt HTML with static content material, you most likely will not see a lot profit from vinext immediately. That stated, if one engineer can spend $1,100 in tokens and rebuild Subsequent.js, you may most likely spend $10 and migrate to a Vite-based framework designed particularly for static content material, like Astro (which additionally deploys to Cloudflare Staff).

For websites that are not purely static, although, we predict we are able to do one thing higher than pre-rendering every part at construct time.

Subsequent.js pre-renders each web page listed in generateStaticParams() throughout the construct. A website with 10,000 product pages means 10,000 renders at construct time, though 99% of these pages could by no means obtain a request. Builds scale linearly with web page rely. Because of this massive Subsequent.js websites find yourself with 30-minute builds.

So we constructed Visitors-aware Pre-Rendering (TPR). It is experimental immediately, and we plan to make it the default as soon as now we have extra real-world testing behind it.

The concept is straightforward. Cloudflare is already the reverse proxy in your website. Now we have your site visitors information. We all know which pages truly get visited. So as an alternative of pre-rendering every part or pre-rendering nothing, vinext queries Cloudflare’s zone analytics at deploy time and pre-renders solely the pages that matter.

vinext deploy --experimental-tpr

  Constructing...
  Construct full (4.2s)

  TPR (experimental): Analyzing site visitors for my-store.com (final 24h)
  TPR: 12,847 distinctive paths — 184 pages cowl 90% of site visitors
  TPR: Pre-rendering 184 pages...
  TPR: Pre-rendered 184 pages in 8.3s → KV cache

  Deploying to Cloudflare Staff...

For a website with 100,000 product pages, the ability regulation means 90% of site visitors normally goes to 50 to 200 pages. These get pre-rendered in seconds. Every little thing else falls again to on-demand SSR and will get cached by way of ISR after the primary request. Each new deploy refreshes the set based mostly on present site visitors patterns. Pages that go viral get picked up mechanically. All of this works with out generateStaticParams() and with out coupling your construct to your manufacturing database.

A venture like this might usually take a group of engineers months, if not years. A number of groups at numerous corporations have tried it, and the scope is simply monumental. We tried as soon as at Cloudflare! Two routers, 33+ module shims, server rendering pipelines, RSC streaming, file-system routing, middleware, caching, static export. There is a cause no one has pulled it off.

This time we did it in below every week. One engineer (technically engineering supervisor) directing AI.

The primary commit landed on February 13. By the top of that very same night, each the Pages Router and App Router had fundamental SSR working, together with middleware, server actions, and streaming. By the following afternoon, App Router Playground was rendering 10 of 11 routes. By day three, vinext deploy was delivery apps to Cloudflare Staff with full shopper hydration. The remainder of the week was hardening: fixing edge instances, increasing the take a look at suite, bringing API protection to 94%.

What modified from these earlier makes an attempt? AI bought higher. Means higher.

Not each venture would go this fashion. This one did as a result of just a few issues occurred to line up on the proper time.

Subsequent.js is well-specified. It has in depth documentation, a large person base, and years of Stack Overflow solutions and tutorials. The API floor is everywhere in the coaching information. Once you ask Claude to implement getServerSideProps or clarify how useRouter works, it would not hallucinate. It is aware of how Subsequent works.

Subsequent.js has an elaborate take a look at suite. The Subsequent.js repo accommodates hundreds of E2E exams overlaying each characteristic and edge case. We ported exams straight from their suite (you may see the attribution within the code). This gave us a specification we may confirm towards mechanically.

Vite is a superb basis. Vite handles the onerous elements of front-end tooling: quick HMR, native ESM, a clear plugin API, manufacturing bundling. We did not need to construct a bundler. We simply needed to train it to talk Subsequent.js. @vitejs/plugin-rsc remains to be early, but it surely gave us React Server Parts assist with out having to construct an RSC implementation from scratch.

The fashions caught up. We do not assume this might have been doable even just a few months in the past. Earlier fashions could not maintain coherence throughout a codebase this measurement. New fashions can maintain the total structure in context, cause about how modules work together, and produce right code typically sufficient to maintain momentum going. At instances, I noticed it go into Subsequent, Vite, and React internals to determine a bug. The state-of-the-art fashions are spectacular, and so they appear to maintain getting higher.

All of these issues needed to be true on the similar time. Nicely-documented goal API, complete take a look at suite, stable construct software beneath, and a mannequin that would truly deal with the complexity. Take any one among them away and this does not work practically as effectively.

Virtually each line of code in vinext was written by AI. However this is the factor that issues extra: each line passes the identical high quality gates you’d count on from human-written code. The venture has 1,700+ Vitest exams, 380 Playwright E2E exams, full TypeScript sort checking by way of tsgo, and linting by way of oxlint. Steady integration runs all of it on each pull request. Establishing a set of excellent guardrails is vital to creating AI productive in a codebase.

The method began with a plan. I spent a few hours going forwards and backwards with Claude in OpenCode to outline the structure: what to construct, in what order, which abstractions to make use of. That plan turned the north star. From there, the workflow was simple:

1. Outline a activity (“implement the next/navigation shim with usePathname, useSearchParams, useRouter“).

2. Let the AI write the implementation and exams.

3. Run the take a look at suite.

4. If exams cross, merge. If not, give the AI the error output and let it iterate.

5. Repeat.

We wired up AI brokers for code evaluation too. When a PR was opened, an agent reviewed it. When evaluation feedback got here again, one other agent addressed them. The suggestions loop was principally automated.

It did not work completely each time. There have been PRs that had been simply fallacious. The AI would confidently implement one thing that appeared proper however did not match precise Subsequent.js conduct. I needed to course-correct usually. Structure choices, prioritization, figuring out when the AI was headed down a useless finish: that was all me. Once you give AI good route, good context, and good guardrails, it may be very productive. However the human nonetheless has to steer.

For browser-level testing, I used agent-browser to confirm precise rendered output, client-side navigation, and hydration conduct. Unit exams miss plenty of delicate browser points. This caught them.

Over the course of the venture, we ran over 800 periods in OpenCode. Complete value: roughly $1,100 in Claude API tokens.

Why do now we have so many layers within the stack? This venture pressured me to assume deeply about this query. And to think about how AI impacts the reply.

Most abstractions in software program exist as a result of people need assistance. We could not maintain the entire system in our heads, so we constructed layers to handle the complexity for us. Every layer made the following individual’s job simpler. That is how you find yourself with frameworks on prime of frameworks, wrapper libraries, hundreds of strains of glue code.

AI would not have the identical limitation. It might probably maintain the entire system in context and simply write the code. It would not want an intermediate framework to remain organized. It simply wants a spec and a basis to construct on.

It is not clear but which abstractions are really foundational and which of them had been simply crutches for human cognition. That line goes to shift loads over the following few years. However vinext is an information level. We took an API contract, a construct software, and an AI mannequin, and the AI wrote every part in between. No intermediate framework wanted. We predict this sample will repeat throughout plenty of software program. The layers we have constructed up through the years aren’t all going to make it.

Because of the Vite group. Vite is the inspiration this entire factor stands on. @vitejs/plugin-rsc remains to be early days, but it surely gave me RSC assist with out having to construct that from scratch, which might have been a dealbreaker. The Vite maintainers had been responsive and useful as I pushed the plugin into territory it hadn’t been examined in earlier than.

We additionally wish to acknowledge the Subsequent.js group. They’ve spent years constructing a framework that raised the bar for what React improvement may appear like. The truth that their API floor is so well-documented and their take a look at suite so complete is an enormous a part of what made this venture doable. vinext would not exist with out the usual they set.

vinext consists of an Agent Ability that handles migration for you. It really works with Claude Code, OpenCode, Cursor, Codex, and dozens of different AI coding instruments. Set up it, open your Subsequent.js venture, and inform the AI emigrate:

npx abilities add cloudflare/vinext

Then open your Subsequent.js venture in any supported software and say:

migrate this venture to vinext

The ability handles compatibility checking, dependency set up, config technology, and dev server startup. It is aware of what vinext helps and can flag something that wants handbook consideration.

Or in case you favor doing it by hand:

npx vinext init    # Migrate an present Subsequent.js venture
npx vinext dev     # Begin the dev server
npx vinext deploy  # Ship to Cloudflare Staff

The supply is at github.com/cloudflare/vinext. Points, PRs, and suggestions are welcome.