只要1100美元tokens，一周重寫 Next.js！

編輯｜冷貓

今天，Web 開發(fā)社區(qū)爆發(fā)了一條令人咋舌的技術(shù)新聞。

Cloudflare 的一名工程師在一周之內(nèi)，借助 AI 模型從頭重建了 Next.js 。

該公司的首席技術(shù)官 Dane Knecht 發(fā)推慶祝這一史詩級的成就，稱之為「Next.js 的解放日」，Next.js 屬于每個人。

Cloudflare 稱，在這次重構(gòu)中，保留了 Next.js 的出色開發(fā)體驗，沒有定制的工具，打造了一個基于 Vite 構(gòu)建的，名為 vinext 的替代框架。

Vinext 是一個可以無縫替換 Next.js 的框架，只需一條命令即可部署到 Cloudflare Workers。

在早期的基準測試中，它構(gòu)建生產(chǎn)應(yīng)用的速度最高可達 4 倍，生成的客戶端包大小最高可縮小 57%。而且目前已有一些客戶在將其用于生產(chǎn)環(huán)境。

最夸張的是，整個過程大約只花費了價值 1100 美元的 tokens

Cloudflare 發(fā)布了該工作的介紹博客，感興趣的讀者可以進行參閱。

• 博客鏈接：https://blog.cloudflare.com/vinext/

從 Next.js 到 vinext 的實驗性進化

Next.js 的影響力與困境

Next.js 是當前最大的 React 全棧框架之一，它定義了數(shù)百萬 web 應(yīng)用的開發(fā)方式，尤其在 SSR（服務(wù)器渲染）、RSC（React Server Components）、靜態(tài)生成與漸進再生（ISR）等特性上的創(chuàng)新，使其成為現(xiàn)代 Web 的標配。

然而，這把雙刃劍也帶來復(fù)雜性：它的構(gòu)建工具 Turbopack、專有構(gòu)建輸出，以及與平臺無關(guān)的部署流程，一直是生態(tài)中反復(fù)被提及的痛點。

以 Next.js 的構(gòu)建輸出為基礎(chǔ)進行二次構(gòu)建，是一種困難且脆弱的方法。過去幾年，社區(qū)嘗試使用 OpenNext 等適配器解決 Next.js 在云平臺（尤其是 Cloudflare Workers）上的部署問題，這些工具通過轉(zhuǎn)換 Next.js 的構(gòu)建輸出，使其在 V8 沙箱等環(huán)境下運行。但這種「轉(zhuǎn)譯層」經(jīng)常與 Next.js 的版本更新相互博弈 —— 就像打地鼠一樣，不斷修補邊緣兼容問題。

Next.js 一直在開發(fā)一個一等公民級別的 adapters API，目前這仍處于早期階段。但即便有了 adapters，本質(zhì)上仍然是構(gòu)建在定制化的 Turbopack 工具鏈之上。而且 adapters 只覆蓋構(gòu)建和部署階段。

在開發(fā)階段，next dev 仍然只能在 Node.js 中運行，沒有辦法接入其他運行時環(huán)境。如果你的應(yīng)用使用了平臺特定 API，比如 Durable Objects、KV 或 AI 綁定，那么在開發(fā)環(huán)境中就無法直接測試這些代碼，只能通過各種變通方案來實現(xiàn)。

Vinext 的方案

針對這些麻煩事兒，Cloudflare 的工程師提出，如果我們不去適配 Next.js 的構(gòu)建輸出，而是直接在 Vite 之上重新實現(xiàn) Next.js 的 API 接口，會怎么樣？

Vite 是除 Next.js 之外，大多數(shù)前端生態(tài)所使用的構(gòu)建工具，驅(qū)動著 Astro、SvelteKit、Nuxt 和 Remix 等框架。

Vite（法語意為「快」）是一款現(xiàn)代前端構(gòu)建工具，它通過重新設(shè)計開發(fā)和構(gòu)建流程，讓 Web 開發(fā)的體驗變得 極速、直觀且高效。它最早由 Evan You（Vue.js 創(chuàng)始人）提出，并在 2020 年正式發(fā)布，迅速成為了整個前端生態(tài)的核心基礎(chǔ)設(shè)施之一。

傳統(tǒng)的前端構(gòu)建工具（例如 Webpack 或 Parcel）會在啟動開發(fā)服務(wù)器之前，把整個應(yīng)用代碼全部打包處理，這在大型項目中會帶來明顯的延遲。而 Vite 的理念則是借助現(xiàn)代瀏覽器和生態(tài)的新能力 —— 原生 ES 模塊（ESM），徹底改變這一體驗。

在安裝 vinext 后，只需在腳本中將 next 替換為 vinext，其余一切保持不變，現(xiàn)有的 app/、pages/ 以及 next.config.js 都可以直接使用。

初期基準測試顯示，vinext 在構(gòu)建速度和客戶端 bundle 大小上都有顯著優(yōu)勢：

• 在某 33 路由應(yīng)用上，利用 Vite 8（Rolldown）構(gòu)建，vinext 構(gòu)建時間比 Next.js 快約 4.4 倍
• 客戶端 bundle gzipped 大小比 Next.js 小約 56%以上。

這一數(shù)字并非偶然。Vite 生態(tài)的原生 ESM 和輕量構(gòu)建管線使得整體構(gòu)建過程比 Next.js 傳統(tǒng)的 Turbopack 更加敏捷，而 AI 成功編寫可通過嚴格測試的實現(xiàn)代碼，則是這一成果得以快速達成的關(guān)鍵。

不過官方也強調(diào)，這仍然是一個實驗性項目。vinext 上線時間不足一周，尚未經(jīng)過大規(guī)模流量考驗，某些 Next.js 的靜態(tài)預(yù)渲染方案（靜態(tài) build 預(yù)掛載生成）仍未完全覆蓋，需要進一步打磨。

完全用 AI 完成重建

根據(jù) Cloudflare 官方博客，整個項目由一名工程經(jīng)理牽頭，只用了大約一周時間、約 800 多次與 AI 模型交互的 OpenCode 會話、以及合計約 1100 美金的 AI token 成本，就搭建出了一個 兼容 Next.js 16 API 的替代框架。

項目從 2 月 13 日第一條提交開始：

• 當天晚上，就實現(xiàn)了基礎(chǔ)的 Pages Router 和 App Router 的 SSR 渲染、Middleware 支持、Server Actions 等。
• 第二天下午，App Router Playground 可渲染絕大多數(shù)路由。
• 到第三天，vinext deploy 已能將應(yīng)用打包并發(fā)布到 Cloudflare Workers，并支持客戶端水合和導航。
• 剩下幾天則用于完善測試套件（包括 1700 多個 Vitest 單元測試和 380 多個 Playwright E2E 測試）和覆蓋 Next.js API 94% 的測試驗證。

該項目是 AI 在工程師設(shè)定架構(gòu)規(guī)范、分配任務(wù)、執(zhí)行反饋循環(huán)的協(xié)助下逐步逼近高質(zhì)量實現(xiàn)的結(jié)果。

為什么一個如此夸張的項目能在一周內(nèi)實現(xiàn)？

Cloudflare 的解釋是「天時地利人和」，并不是所有項目都能用這種方式完成。這個項目之所以可以，是因為幾個關(guān)鍵條件在同一時間點同時成立。

1.目標 API 已有良好文檔和測試覆蓋

作為主流開源項目，Next.js 擁有詳盡的文檔、龐大的用戶群體，以及多年積累的 Stack Overflow 問答和教程。它的 API 早已廣泛存在于訓練數(shù)據(jù)之中。如果讓 Claude 實現(xiàn) getServerSideProps，或者解釋 useRouter 的工作原理，它不會產(chǎn)生幻覺。它真的「知道」 Next.js 是如何運作的。

Next.js 擁有一個非常完善的測試體系。Next.js 倉庫中包含數(shù)千個端到端測試，覆蓋幾乎所有功能和邊界情況。工程師直接移植了測試，提供了一份可以機械驗證的說明書。

2.基礎(chǔ)工具生態(tài)成熟

Vite 作為現(xiàn)代構(gòu)建工具，Vite 已經(jīng)解決了前端工具鏈中最困難的部分：極速 HMR、原生 ESM、干凈的插件 API，以及生產(chǎn)級打包能力。它既能處理模塊化構(gòu)建也能擴展 RSC 等高級特性，為實現(xiàn)提供了穩(wěn)定基礎(chǔ)。

3.AI 模型能力躍遷

即便在幾個月前，這件事都不可能完成。早期模型無法在如此規(guī)模的代碼庫中保持長期一致性。新一代模型可以在上下文中容納完整架構(gòu)，推理模塊之間的交互關(guān)系，并足夠頻繁地產(chǎn)出正確代碼，從而維持項目推進的節(jié)奏。當前最先進的模型確實令人印象深刻，而且還在不斷進步。

軟件中的大多數(shù)抽象層，本質(zhì)上是為了幫助人類管理復(fù)雜性。人類無法在腦中同時容納整個系統(tǒng)，于是構(gòu)建了分層結(jié)構(gòu)來組織復(fù)雜度。每一層都讓下一位開發(fā)者的工作更容易。

于是，我們有了「框架的框架」、包裝庫、成千上萬行的膠水代碼。

但 AI 并沒有同樣的限制。它可以在上下文中持有整個系統(tǒng)，然后直接寫代碼。它不需要一個中間框架來維持組織結(jié)構(gòu)。它只需要一個規(guī)格說明和一個可靠的基礎(chǔ)。

這一案例之所以受到社區(qū)熱議，是因為它是一個清晰的拐點：AI 真正作為協(xié)作伙伴參與、主導大型系統(tǒng)級實現(xiàn)。并且，AI 拋棄了很多中間框架，讓真正基礎(chǔ)性的代碼部分和便于人類認知代碼結(jié)構(gòu)的分界線逐漸顯現(xiàn)。

正如 Cloudflare 博客文章最后所感嘆的那樣：「我們不確定哪些抽象是真正基礎(chǔ)的，哪些只是為了適應(yīng)人類認知構(gòu)建的『拐杖』。AI 的出現(xiàn)正促使這一邊界重新被定義。」