只要1100美元tokens,一周重寫 Next.js!

只要1100美元tokens,一周重寫 Next.js!

文章圖片

只要1100美元tokens,一周重寫 Next.js!

文章圖片

只要1100美元tokens,一周重寫 Next.js!

文章圖片

只要1100美元tokens,一周重寫 Next.js!

文章圖片


編輯|冷貓
今天 , Web 開發社區爆發了一條令人咋舌的技術新聞 。

Cloudflare 的一名工程師在一周之內 , 借助 AI 模型從頭重建了 Next.js。
該公司的首席技術官 Dane Knecht 發推慶祝這一史詩級的成就 , 稱之為「Next.js 的解放日」 , Next.js 屬于每個人 。
【只要1100美元tokens,一周重寫 Next.js!】
Cloudflare 稱 , 在這次重構中 , 保留了 Next.js 的出色開發體驗 , 沒有定制的工具 , 打造了一個基于 Vite 構建的 , 名為 vinext 的替代框架 。
Vinext 是一個可以無縫替換 Next.js 的框架 , 只需一條命令即可部署到 Cloudflare Workers 。
在早期的基準測試中 , 它構建生產應用的速度最高可達 4 倍 , 生成的客戶端包大小最高可縮小 57% 。 而且目前已有一些客戶在將其用于生產環境 。
最夸張的是 , 整個過程大約只花費了價值 1100 美元的 tokens 。
Cloudflare 發布了該工作的介紹博客 , 感興趣的讀者可以進行參閱 。

博客鏈接:https://blog.cloudflare.com/vinext/從 Next.js 到 vinext 的實驗性進化
Next.js 的影響力與困境
Next.js 是當前最大的 React 全棧框架之一 , 它定義了數百萬 web 應用的開發方式 , 尤其在 SSR(服務器渲染)、RSC(React Server Components)、靜態生成與漸進再生(ISR)等特性上的創新 , 使其成為現代 Web 的標配 。
然而 , 這把雙刃劍也帶來復雜性:它的構建工具 Turbopack、專有構建輸出 , 以及與平臺無關的部署流程 , 一直是生態中反復被提及的痛點 。
以 Next.js 的構建輸出為基礎進行二次構建 , 是一種困難且脆弱的方法 。 過去幾年 , 社區嘗試使用 OpenNext 等適配器解決 Next.js 在云平臺(尤其是 Cloudflare Workers)上的部署問題 , 這些工具通過轉換 Next.js 的構建輸出 , 使其在 V8 沙箱等環境下運行 。 但這種「轉譯層」經常與 Next.js 的版本更新相互博弈 —— 就像打地鼠一樣 , 不斷修補邊緣兼容問題 。
Next.js 一直在開發一個一等公民級別的 adapters API , 目前這仍處于早期階段 。 但即便有了 adapters , 本質上仍然是構建在定制化的 Turbopack 工具鏈之上 。 而且 adapters 只覆蓋構建和部署階段 。
在開發階段 , next dev 仍然只能在 Node.js 中運行 , 沒有辦法接入其他運行時環境 。 如果你的應用使用了平臺特定 API , 比如 Durable Objects、KV 或 AI 綁定 , 那么在開發環境中就無法直接測試這些代碼 , 只能通過各種變通方案來實現 。
Vinext 的方案
針對這些麻煩事兒 , Cloudflare 的工程師提出 , 如果我們不去適配 Next.js 的構建輸出 , 而是直接在 Vite 之上重新實現 Next.js 的 API 接口 , 會怎么樣?
Vite 是除 Next.js 之外 , 大多數前端生態所使用的構建工具 , 驅動著 Astro、SvelteKit、Nuxt 和 Remix 等框架 。
Vite(法語意為「快」)是一款現代前端構建工具 , 它通過重新設計開發和構建流程 , 讓 Web 開發的體驗變得 極速、直觀且高效 。 它最早由 Evan You(Vue.js 創始人)提出 , 并在 2020 年正式發布 , 迅速成為了整個前端生態的核心基礎設施之一 。
傳統的前端構建工具(例如 Webpack 或 Parcel)會在啟動開發服務器之前 , 把整個應用代碼全部打包處理 , 這在大型項目中會帶來明顯的延遲 。 而 Vite 的理念則是借助現代瀏覽器和生態的新能力 —— 原生 ES 模塊(ESM) , 徹底改變這一體驗 。
在安裝 vinext 后 , 只需在腳本中將 next 替換為 vinext , 其余一切保持不變 , 現有的 app/、pages/ 以及 next.config.js 都可以直接使用 。
初期基準測試顯示 , vinext 在構建速度和客戶端 bundle 大小上都有顯著優勢:
在某 33 路由應用上 , 利用 Vite 8(Rolldown)構建 , vinext 構建時間比 Next.js 快約 4.4 倍; 客戶端 bundle gzipped 大小比 Next.js 小約 56% 以上 。
這一數字并非偶然 。 Vite 生態的原生 ESM 和輕量構建管線使得整體構建過程比 Next.js 傳統的 Turbopack 更加敏捷 , 而 AI 成功編寫可通過嚴格測試的實現代碼 , 則是這一成果得以快速達成的關鍵 。
不過官方也強調 , 這仍然是一個 實驗性項目 。 vinext 上線時間不足一周 , 尚未經過大規模流量考驗 , 某些 Next.js 的靜態預渲染方案(靜態 build 預掛載生成)仍未完全覆蓋 , 需要進一步打磨 。
完全用 AI 完成重建
根據 Cloudflare 官方博客 , 整個項目由一名工程經理牽頭 , 只用了大約 一周時間、約 800 多次與 AI 模型交互的 OpenCode 會話、以及合計約 1100 美金的 AI token 成本 , 就搭建出了一個 兼容 Next.js 16 API 的替代框架 。
項目從 2 月 13 日第一條提交開始:
當天晚上 , 就實現了基礎的 Pages Router 和 App Router 的 SSR 渲染、Middleware 支持、Server Actions 等 。 第二天下午 , App Router Playground 可渲染絕大多數路由 。 到第三天 , vinext deploy 已能將應用打包并發布到 Cloudflare Workers , 并支持客戶端水合和導航 。 剩下幾天則用于完善測試套件(包括 1700 多個 Vitest 單元測試和 380 多個 Playwright E2E 測試)和覆蓋 Next.js API 94% 的測試驗證 。該項目是 AI 在工程師設定架構規范、分配任務、執行反饋循環的協助下逐步逼近高質量實現的結果 。

為什么一個如此夸張的項目能在一周內實現?
Cloudflare 的解釋是「天時地利人和」 , 并不是所有項目都能用這種方式完成 。 這個項目之所以可以 , 是因為幾個關鍵條件在同一時間點同時成立 。
1. 目標 API 已有良好文檔和測試覆蓋
作為主流開源項目 , Next.js 擁有詳盡的文檔、龐大的用戶群體 , 以及多年積累的 Stack Overflow 問答和教程 。 它的 API 早已廣泛存在于訓練數據之中 。 如果讓 Claude 實現 getServerSideProps , 或者解釋 useRouter 的工作原理 , 它不會產生幻覺 。 它真的「知道」 Next.js 是如何運作的 。
Next.js 擁有一個非常完善的測試體系 。 Next.js 倉庫中包含數千個端到端測試 , 覆蓋幾乎所有功能和邊界情況 。 工程師直接移植了測試 , 提供了一份可以機械驗證的說明書 。

2. 基礎工具生態成熟
Vite 作為現代構建工具 , Vite 已經解決了前端工具鏈中最困難的部分:極速 HMR、原生 ESM、干凈的插件 API , 以及生產級打包能力 。 它既能處理模塊化構建也能擴展 RSC 等高級特性 , 為實現提供了穩定基礎 。
3. AI 模型能力躍遷
即便在幾個月前 , 這件事都不可能完成 。 早期模型無法在如此規模的代碼庫中保持長期一致性 。 新一代模型可以在上下文中容納完整架構 , 推理模塊之間的交互關系 , 并足夠頻繁地產出正確代碼 , 從而維持項目推進的節奏 。 當前最先進的模型確實令人印象深刻 , 而且還在不斷進步 。
軟件中的大多數抽象層 , 本質上是為了幫助人類管理復雜性 。 人類無法在腦中同時容納整個系統 , 于是構建了分層結構來組織復雜度 。 每一層都讓下一位開發者的工作更容易 。
于是 , 我們有了「框架的框架」、包裝庫、成千上萬行的膠水代碼 。
但 AI 并沒有同樣的限制 。 它可以在上下文中持有整個系統 , 然后直接寫代碼 。 它不需要一個中間框架來維持組織結構 。 它只需要一個規格說明和一個可靠的基礎 。

這一案例之所以受到社區熱議 , 是因為它是一個清晰的拐點:AI 真正作為協作伙伴參與、主導大型系統級實現 。 并且 , AI 拋棄了很多中間框架 , 讓真正基礎性的代碼部分和便于人類認知代碼結構的分界線逐漸顯現 。
正如 Cloudflare 博客文章最后所感嘆的那樣:「我們不確定哪些抽象是真正基礎的 , 哪些只是為了適應人類認知構建的『拐杖』 。 AI 的出現正促使這一邊界重新被定義 。 」

    推薦閱讀