Cloudflare Engineer Rebuilds Next.js on Vite

A Cloudflare engineer reportedly rebuilt the Next.js infrastructure and App Router from scratch on top of the Vite build tool in one week. The project, dubbed "vinext," was developed with assistance from the AI model Claude and aims to achieve faster build and deployment times. A technical deep dive explains the foundations of the from-scratch rebuild.

- Vite, the build tool used in the "vinext" project, was created by Evan You, who also created the JavaScript framework Vue.js. It is designed to provide a faster and more streamlined development experience compared to traditional bundlers by using native ES modules during development. - The project aims to improve on Next.js's performance, with early benchmarks showing "vinext" can build production applications up to 4.4 times faster and produce client bundles that are up to 57% smaller. - A key feature introduced in "vinext" is 'Traffic-aware Pre-Rendering' (TPR), which uses Cloudflare's traffic analytics to only pre-render the pages that receive the most traffic. This approach is designed to circumvent the long build times often associated with large Next.js sites that have thousands of pages. - The development of "vinext" was heavily reliant on AI, costing about $1,100 in API tokens for over 800 sessions with the AI model Claude. The engineer, Steve Faulkner, guided the AI to build a clean-room reimplementation of the Next.js API surface as a Vite plugin. - While Next.js is a comprehensive framework, Vite is fundamentally a build tool that has become the standard for many other modern frameworks like Nuxt, SvelteKit, and Astro. "vinext" essentially replaces Next.js's underlying build tooling with Vite. - The project is a full reimplementation, not a wrapper, and it supports both the modern App Router and the classic Pages Router from Next.js, covering about 94% of the API surface. - Although the initial deployment target is Cloudflare Workers, approximately 95% of the "vinext" codebase is platform-agnostic, and a proof-of-concept has been successfully run on Vercel, Next.js's parent company.

Get your own daily briefing

Scout delivers personalized news, insights, and conversations tailored to your role and industry.

Download on the App Store

Shared from Scout - Be the smartest in the room.