我们是如何在一周内用人工智能重构 Next.js 的
内容
上周，一名工程师和一个 AI 模型从头开始重建了最流行的前端框架。结果是 vinext（读音为“vee-next”），它是一个 Next.js 的直接替代品，基于 Vite 构建，只需一个命令即可部署到 Cloudflare Workers。在早期的基准测试中，它构建生产应用的速度最高可达 4 倍，生成的客户端包最高可小 57%。我们已经有客户在生产环境中使用它。
整个过程的成本约为 1,100 美元的 tokens。
Next.js 部署问题
Next.js 是最流行的 React 框架。数百万开发者使用它。它驱动了大量生产环境下的网站，这是因为它的开发者体验极佳。
但当 Next.js 用于更广泛的无服务器生态系统时，它存在部署问题。该工具链是完全定制的：Next.js 在 Turbopack 上投入了大量精力，但如果你想将其部署到 Cloudflare、Netlify 或 AWS Lambda，你必须将构建输出转换为目标平台可以运行的格式。
如果你在想：“这不是 OpenNext 要解决的问题吗？”你是对的。
OpenNext 正是为了应对这个问题而构建的。多个提供商（包括 Cloudflare）都投入了大量工程精力。它的效果很好，但很快就遇到了局限性，变成了打地鼠游戏。
在 Next.js 输出的基础上进行构建被证明是一种困难而脆弱的方法。由于 OpenNext 必须反向工程 Next.js 的构建输出，这导致版本之间不可预测的变化，需要大量工作来纠正。
Next.js 一直在致力于一流的适配器 API，我们也与他们合作。尽管适配器已经有一定进展，但你仍然基于定制的 Turbopack 工具链构建。适配器仅涵盖构建和部署。在开发过程中，next dev 独家在 Node.js 中运行，无法插入其他运行时。如果你的应用程序使用 Durable Objects、KV 或 AI 绑定等平台特定 API，你无法在开发环境中测试这些代码，而需要变通方法。
介绍 vinext
如果我们不适应 Next.js 输出，而是直接在 Vite 上重新实现 Next.js API 呢？Vite 是 Next.js 之外的多数前端生态系统使用的构建工具，为 Astro、SvelteKit、Nuxt 和 Remix 等框架提供支持。纯粹的重新实现，而非简单的包装或适配器。我们当初并不认为它会成功。但现在是 2026 年，构建软件的成本已经完全不同。
我们取得了比预期更显著的进展。
npm install vinext
在脚本中将 next 替换为 vinext，其他一切保持不变。现有的 app/、pages/和next.config.js` 均可直接使用。
vinext dev # 带有 HMR 的开发服务器
vinext build # 生产环境构建
vinext deploy # 构建并部署到 Cloudflare Workers
这不是围绕 Next.js 和 Turbopack 输出的包装。它是 API 表面的替代实现：路由、服务器渲染、React 服务器组件、服务器操作、缓存、中间件。所有这些都基于 Vite 构建为插件。最重要的是，由于 Vite 环境 API，Vite 输出可在任何平台上运行。
数据
早期的基准测试结果令人乐观。我们使用共享的 33 路由应用，将 vinext 与 Next.js 16 进行比较。
两个框架执行相同的工作：编译、打包和准备服务器渲染路由。我们在 Next.js 构建中禁用了 TypeScript 类型检查和 ESLint（Vite 在构建过程中不运行这些），并使用 force-dynamic，因此 Next.js 不会花费额外时间预渲染静态路由，这会不公平地减慢其速度。目标是仅衡量打包和编译速度，不考虑其他因素。基准测试在 GitHub CI 上每次合并到 main 分支时运行。
生产环境构建时间：
| 框架 | 平均时间 | vs Next.js |
|---|---|---|
| Next.js 16.1.6 (Turbopack) | 7.38 秒 | 基准 |
| vinext (Vite 7 / Rollup) | 4.64 秒 | 快 1.6 倍 |
| vinext (Vite 8 / Rolldown) | 1.67 秒 | 快 4.4 倍 |
客户端包大小（gzip 后）：
| 框架 | gzip 后大小 | vs Next.js |
|---|---|---|
| Next.js 16.1.6 | 168.9 KB | 基准 |
| vinext (Rollup) | 74.0 KB | 小 56% |
| vinext (Rolldown) | 72.9 KB | 小 57% |
这些基准测试衡量编译和打包速度，而不是生产环境服务性能。测试装置是一个 33 路由应用，不代表所有生产环境应用的样本。我们预计随着这三个项目的持续发展，这些数字会发生变化。完整的测试方法和历史结果 公开透明。仅供参考，不作为权威结论。
尽管如此，方向是令人鼓舞的。Vite 的架构，尤其是 Rolldown（Vite 8 中基于 Rust 的打包工具），在构建性能方面具有结构优势，在这里得到了清晰体现。
部署到 Cloudflare Workers
vinext 以 Cloudflare Workers 作为首个部署目标。只需一个命令即可从源代码部署到正在运行的 Worker：
vinext deploy
这处理了所有事情：构建应用程序、自动生成 Worker 配置并部署。App Router 和 Pages Router 都可在 Workers 上运行，支持完整的客户端水合、交互组件、客户端导航和 React 状态。
对于生产环境缓存，vinext 包含一个 Cloudflare KV 缓存处理器，为您提供开箱即用的 ISR（增量静态再生）：
import {
KVCacheHandler
} from "vinext/cloudflare";
import {
setCacheHandler
} from "next/cache";
setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));
KV 是大多数应用程序的良好默认选择，但缓存层设计为可插拔。setCacheHandler 调用意味着您可以根据需要更换后端。R2 可能更适合具有大型缓存有效负载或不同访问模式的应用程序。我们也正在改进我们的 Cache API，以提供一个强大的缓存层，且配置更少。目标是灵活性：选择适合您应用程序的缓存策略。
实时示例：
我们还有一个 实时示例，展示了 Cloudflare Agents 在 Next.js 应用中运行，无需像 getPlatformProxy 这样的变通方法，因为整个应用现在在 workerd 中运行，涵盖开发和部署阶段。这意味着可以在不做妥协的情况下使用 Durable Objects、AI 绑定和所有其他 Cloudflare 特有服务。查看这里。
框架是团队合作
当前的部署目标是 Cloudflare Workers，但这只是其中的一小部分。vinext 大约 95% 的代码是纯 Vite。路由、模块 shim、SSR 管道、RSC 集成：没有任何 Cloudflare 特有的内容。
Cloudflare 正在与其他托管提供商合作，将此工具链用于他们的客户（迁移工作量很小——我们在 Vercel 上有一个概念验证，耗时不到 30 分钟！）。这是一个开源项目，为了其长期成功，我们相信与生态系统中的合作伙伴合作以确保持续投资至关重要。其他平台的 PR 欢迎。如果您有兴趣添加部署目标，请开一个 issue 或联系我们。
状态：实验性
我们想明确一点：vinext 是实验性的。它还不到一周大，还没有经过大规模流量测试。如果您将其用于生产环境应用，请谨慎。
话虽如此，测试套件非常广泛：超过 1,700 个 Vitest 测试和 380 个 Playwright E2E 测试，包括直接从 Next.js 测试套件和 OpenNext 的 Cloudflare 一致性套件移植的测试。我们已针对 Next.js App Router Playground 进行验证。覆盖率达到 Next.js 16 API 表面的 94%。
真实客户的早期结果令人鼓舞。我们与 National Design Studio 合作，他们的目标是现代化所有政府界面，在他们的测试站点 CIO.gov 上运行 vinext，取得了建设性的改进。他们的构建时间和包大小已经有明显改善。
README 诚实地介绍了 不支持和不会支持的功能，以及 已知的限制。我们希望做到透明，而不是过度承诺。
关于预渲染呢？
vinext 已经支持增量静态再生（ISR），开箱即用。在对任何页面进行首次请求后，它会被缓存并在后台重新验证，就像 Next.js 一样。那部分已经可以正常工作。
关于预渲染
vinext 已经支持开箱即用的增量静态再生（ISR）。在任何页面的第一个请求之后，它会被缓存并在后台重新验证，就像 Next.js 一样。这部分功能已经在今天实现了。
vinext 目前还不支持构建时的静态预渲染。在 Next.js 中，没有动态数据的页面会在 next build 时渲染，并作为静态 HTML 提供。如果您有动态路由，可以使用 generateStaticParams() 来枚举哪些页面需要提前构建。vinext 目前还不具备此功能。
这是一个有意的设计决策，预渲染功能已经在 路线图 中规划。但是，如果您的网站是 100% 预构建的 HTML 和静态内容，您可能不会在今天看到 vinext 的明显优势。话虽如此，如果一位工程师可以花费 1100 美元的代币重建 Next.js，您可能可以花费 10 美元迁移到一个专门为静态内容设计的基于 Vite 的框架，例如 Astro（它也可以部署到 Cloudflare Workers）。
然而，对于那些不是纯静态的网站，我们认为可以做得比在构建时预渲染所有内容更好。
引入流量感知预渲染
Next.js 在构建过程中会预渲染 generateStaticParams() 中列出的所有页面。一个有 10,000 个产品页面的网站意味着在构建时需要渲染 10,000 个页面，即使这些页面中 99% 可能永远不会收到请求。构建时间与页面数量成线性关系。这就是为什么大型 Next.js 网站的构建时间高达 30 分钟。
因此，我们构建了 流量感知预渲染（TPR）。它目前是实验性的，我们计划在有更多现实世界测试后使其成为默认功能。
其理念很简单。Cloudflare 已经是您网站的反向代理，我们拥有您的流量数据。我们知道哪些页面实际被访问。因此，vinext 不会预渲染所有页面或不预渲染任何页面，而是在部署时查询 Cloudflare 的区域分析数据，并仅预渲染那些重要的页面。
vinext deploy --experimental-tpr Building ... Build complete (4. 2s) TPR (experimental): Analyzing traffic for my-store. com (last 24h) TPR : 12,
847 unique paths — 184 pages cover 90 % of traffic TPR : Pre -rendering 184 pages... TPR : Pre -rendered 184 pages in 8. 3s → KV cache Deploying to Cloudflare Workers ...
对于一个有 100,000 个产品页面的网站，幂律意味着 90% 的流量通常会流向 50 到 200 个页面。这些页面会在几秒钟内预渲染。其他页面会 fallback 到按需 SSR，并在第一次请求后通过 ISR 缓存。每次新的部署都会根据当前的流量模式刷新页面集。走红的页面会自动被选中。所有这些都无需 generateStaticParams()，也无需将您的构建与生产数据库耦合。
接纳 Next.js 挑战，但这次使用 AI
像这样的项目通常需要一支工程师团队花费数月甚至数年的时间。几家公司的多个团队曾尝试过，但其规模非常庞大。我们曾在 Cloudflare 尝试过！两个路由器，33+ 模块 shim，服务器渲染管道，RSC 流式处理，文件系统路由，中间件，缓存，静态导出。有原因没人能成功。
这次，我们在不到一周的时间内就完成了。一位工程师（实际上是工程经理）指导 AI。
第一个提交于 2 月 13 日上线。同一天晚上，Pages Router 和 App Router 都实现了基本的 SSR，以及中间件，服务器操作和流式处理。到第二天下午，App Router Playground 已经渲染了 11 个路由中的 10 个。到第三天，vinext deploy 已经将应用程序部署到 Cloudflare Workers，实现了完整的客户端 hydration。剩下的时间用于强化：修复边缘情况，扩展测试套件，将 API 覆盖率提高到 94%。
是什么改变了那些早期的尝试？AI 变得更好。好得多。
为什么这个问题适合 AI
并不是每个项目都会这样做。这个项目之所以能这样做，是因为一些条件恰好在合适的时间得到了满足。
Next.js 具有完善的文档。 它有大量的文档，庞大的用户群体，以及多年的 Stack Overflow 答案和教程。API 接口在所有的训练数据中都有体现。当你让 Claude 实现 getServerSideProps 或解释 useRouter 如何工作时，它不会产生幻觉。它知道 Next.js 是如何工作的。
Next.js 拥有详尽的测试套件。 Next.js 仓库 包含数千个 E2E 测试，涵盖每个功能和边缘情况。我们直接从他们的测试套件中移植了测试（您可以在代码中看到归属）。这使我们拥有了一个可以机械验证的规格。
Vite 是一个优秀的基础。 Vite 处理前端工具链的难点：快速的 HMR，原生 ESM，干净的插件 API，生产环境打包。我们不需要构建一个打包工具。我们只需要教它说 Next.js。 @vitejs/plugin-rsc 还处于早期阶段，但它为我们提供了 RSC 支持，而无需从头开始构建 RSC 实现。
模型赶上了。 我们认为即使几个月前，这也无法实现。早期的模型无法在这么大的代码库中保持一致性。新的模型可以掌握整个架构，推理模块之间的关系，并经常产生正确的代码，以保持项目进展。在某些情况下，我看到它深入 Next.js，Vite 和 React 内部来解决一个错误。最先进的模型令人印象深刻，而且似乎越来越好。
所有这些条件都必须同时具备。文档齐全的目标 API，综合测试套件，坚实的基础构建工具，以及一个可以处理复杂性的模型。缺少任何一个条件，这个项目就不会成功。
我们如何实际构建它
vinext 中几乎每一行代码都是由 AI 编写的。但更重要的是，每行代码都经过了与人类编写的代码相同的质量检查。该项目有 1700+ 个 Vitest 测试，380 个 Playwright E2E 测试，通过 tsgo 进行完整的 TypeScript 类型检查，通过 oxlint 进行 linting。持续集成在每次拉取请求时运行所有这些检查。在代码库中建立一套良好的防护措施对于使 AI 能够高效工作至关重要。
这个过程始于一个计划。我花了几个小时与 Claude 在 OpenCode 上反复沟通，以定义架构：构建什么，按什么顺序， 使用哪些抽象。这个计划成为了指南。从那里开始，工作流程就很直接：
- 定义一个任务（“实现下一个/导航 shim 以及 usePathname, useSearchParams, useRouter”）。
- 让 AI 编写实现和测试。
- 运行测试套件。
- 如果测试通过，则合并。如果不通过，则提供错误输出，让 AI 进行迭代。
- 重复。
我们还为代码审查设置了 AI 代理。当打开一个 PR 时，代理会审查它。当有审查评论时，另一个代理会处理它们。反馈循环大部分是自动的。
它并不每次都完美。有些 PR 是完全错误的。AI 会自信地实现一些似乎正确但与实际 Next.js 行为不符的东西。我不得不经常纠正方向。架构决策，优先级，知道 AI 何时走入死胡同：这些都是我负责的。当你给 AI 好的方向，好的上下文和好的防护措施时，它可以非常高效。但人类仍然需要引导。
对于浏览器级别的测试，我使用 agent-browser 来验证实际渲染的输出，客户端导航和 hydration 行为。单元测试会错过许多微妙的浏览器问题。这也解决了它们。
在整个项目过程中，我们在 OpenCode 上运行了 800 多个会话。总成本：大约 1100 美元的 Claude API 代币。
这对软件意味着什么
为什么我们在堆栈中有这么多层？这个项目迫使我深入思考这个问题。并考虑 AI 如何影响答案。
软件中的大多数抽象存在是因为人类需要帮助。我们无法掌握整个系统，所以我们构建了层来为我们管理复杂性。每一层都使下一个人的工作更容易。这就是为什么你最终会有框架之上的框架，包装库，数千行的胶水代码。
AI 没有同样的限制。它可以掌握整个系统并直接编写代码。它不需要中间框架来保持组织。它只需要一个规格和一个基础来构建。
目前还不清楚哪些抽象是真正基础的，哪些只是人类认知的拐杖。在接下来的几年里，这条线将会发生很大的变化。但 vinext 是一个数据点。我们采用了一个 API 契约，一个构建工具和一个 AI 模型，AI 编写了它们之间的所有内容。无需中间框架。我们认为这种模式将在许多软件中重复出现。我们多年来构建的层并不都会保留。
致谢
感谢 Vite 团队。 Vite 是本项目的基础。 @vitejs/plugin-rsc 虽然仍处于早期阶段，但它为我提供了 RSC 支持，避免了从零开始构建，这对我来说是无法接受的。Vite 维护者在我将该插件推向此前未测试过的新领域时，给予了及时和有帮助的反馈。
我们也感谢 Next.js 团队。多年来，他们构建了一个框架，提高了 React 开发的标准。他们的 API 接口文档齐全，测试套件非常全面，这使得本项目的实现成为可能。如果没有他们设定的标准，vinext 就不会存在。
试用
vinext 包含一个 Agent Skill，可为您处理迁移工作。它与 Claude Code、OpenCode、Cursor、Codex 和其他数十种 AI 编程工具兼容。安装它，打开您的 Next.js 项目，并告诉 AI 进行迁移：
npx skills add cloudflare/vinext
然后，在任何支持的工具中打开您的 Next.js 项目，并输入：
migrate this project to vinext
该技能会处理兼容性检查、依赖项安装、配置生成和开发服务器启动。它了解 vinext 支持的功能，并会标记需要手动处理的部分。
或者，如果您更喜欢手动操作：
npx vinext init # 迁移现有的 Next.js 项目
npx vinext dev # 启动开发服务器
npx vinext deploy # 部署到 Cloudflare Workers
源代码位于 github.com/cloudflare/vinext。欢迎提交问题、拉取请求和反馈。