Cloudflare 工程师用 AI 一周重构 Next.js，成本仅 1100 美元！基于 Vite 的 vinext 框架，构建更快，包更小。
原文标题：只要1100美元tokens，一周重写 Next.js！
原文作者：机器之心
冷月清谈：
怜星夜思：
2、Cloudflare 用 AI 重构 Next.js 的案例，是否意味着前端开发的门槛会进一步降低？这对行业来说是好事还是坏事？
3、如果让你用 AI 重构一个现有的前端框架，你会选择哪个？为什么？
原文内容
Cloudflare 的一名工程师在一周之内，借助 AI 模型从头重建了 Next.js 。
该公司的首席技术官 Dane Knecht 发推庆祝这一史诗级的成就，称之为「Next.js 的解放日」，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 的出现正促使这一边界重新被定义。」
© THE END
转载请联系本公众号获得授权
投稿或寻求报道：liyazhou@jiqizhixin.com