編輯｜冷貓

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

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

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

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

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

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

最夸張的是，整個(gè)過(guò)程大約只花費(fèi)了價(jià)值 1100 美元的 tokens

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

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

從 Next.js 到 vinext 的實(shí)驗(yàn)性進(jìn)化

Next.js 的影響力與困境

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

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

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

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

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

Vinext 的方案

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

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

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

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

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

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

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

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

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

完全用 AI 完成重建

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

項(xiàng)目從 2 月 13 日第一條提交開(kāi)始：

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

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

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

Cloudflare 的解釋是「天時(shí)地利人和」，并不是所有項(xiàng)目都能用這種方式完成。這個(gè)項(xiàng)目之所以可以，是因?yàn)閹讉€(gè)關(guān)鍵條件在同一時(shí)間點(diǎn)同時(shí)成立。

1.目標(biāo) API 已有良好文檔和測(cè)試覆蓋

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

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

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

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

3.AI 模型能力躍遷

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

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

于是，我們有了「框架的框架」、包裝庫(kù)、成千上萬(wàn)行的膠水代碼。

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

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

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