Vinext 1.0 从 AI 实验正式升级为生产就绪框架，支持开发者在 Vite 上运行 Next.js 应用。此次版本带来了高级缓存预热、更广泛的兼容性以及自动化测试流水线。 https://t.co/z1kOPF7JC3 #BirthdayWeek

由 Vite 驱动的 Next.js 应用：Vinext 1.0 发布

来源：https://blog.cloudflare.com/vinext-nextjs-on-vite/?utm_campaign=cf_blog&utm_content=20260928&utm_medium=organic_social&utm_source=twitter 二月份我们发布 Vinext（https://blog.cloudflare.com/vinext/）时，它源于一个大胆的为期一周的 AI 驱动实验，旨在探究一名工程师和一堆 token 能在多大程度上实现基于 Vite 的 Next.js 框架复刻。

自那项实验以来的七个月里，Vinext 已发展成为客户信赖的框架，并在生产环境中运行高流量动态应用。

今天，我们宣布发布 Vinext 1.0，这是实现 Next.js 应用随处部署征程的最新里程碑。Vinext 能让您将任何 Next.js 应用（无论是为 Pages Router 还是 App Router 构建的）转化为可移植应用，部署到任何 Web 平台，包括 Cloudflare Workers 免费套餐、Netlify 或 AWS Lambda。

Vinext 1.0 带来了兼容性、稳定性和缓存行为方面的全面改进，为项目的长期发展奠定了基础。现在是将 Next.js 项目转换为 Vinext 的最佳时机，只需运行 npx vinext check 和 npx vinext init 即可。

升级至 1.0

初版 Vinext 虽具潜力但尚不完整。此后，我们投入大量时间改进 App Router 兼容性，并将其扩展至 Pages Router 应用——我们了解到许多客户长期青睐 Pages Router，且其大型应用迁移过程复杂。我们不希望 Vinext 仅适用于使用最新 App Router 功能的用户。

我们的重点始终是同时支持这两种路由器，并密切监控测试兼容性，目前针对大多数客户要求的重要功能，兼容性已超过 99%。

测试兼容性（不含缓存组件）已提升至 99% 以上。

这一提升得益于围绕我们 GitHub 项目（https://github.com/cloudflare/vinext）的社区支持。Vinext 发布后，社区立即将其应用于各类应用以发现不足。在他们的严格审查下，我们发现了测试覆盖范围内不明显的问题。Vinext 的行为必须与 Next.js 完全一致——仅实现同名函数远远不够。构建替代性的 import { revalidatePath } 相对简单，难点在于确保它能正确影响渲染页面、缓存条目及后续请求。

通过应用追踪请求，确保 Vinext 按预期方式响应——不仅要复制 API，还要复制该机制的运作方式——这是最具挑战性的环节。

修复问题并推进新功能后，我们必须防止倒退，尤其当 Next.js 发生变更时。为此我们构建了测试套件：数千项针对性测试覆盖两种路由器的核心框架行为、开发与生产服务器，以及 Node.js 和 Cloudflare Workers 部署目标。我们还每夜针对 Vinext 运行 Next.js 端到端测试套件，持续监控兼容性变化，确保即时发现合并变更引入的回归问题。除自动化测试外，我们还与将 Vinext 用于生产的大型客户直接合作，确保他们不受问题困扰。

1.0 包含哪些内容

从 Vinext 用户获得的最明确信息是：特定 Next.js 功能承载了整个框架，而 Vinext 无需实现 Next.js 近期版本中的所有功能就能极具实用价值。因此我们聚焦于关键场景下的增强支持：

• **App Router、Pages Router 及混合应用：**客户反馈 Pages Router 依然重要，且迁移并非一蹴而就。因此 Vinext 支持两种路由路径，包括 React Server Components、Server Actions、API 路由、路由处理器、中间件和客户端导航。
• **完整的页面生命周期：**页面可通过多种方式渲染：服务器端渲染、构建时预渲染、导出为静态资产，或使用页面级增量静态再生（ISR）缓存。我们确保后台和按需重新验证能与任何输出模式协同工作。
• **缓存机制：**Vinext 在 App Router、Pages Router 及支持的运行时中提供统一缓存函数集，并进一步支持使用 Cloudflare 的 Workers Cache（https://developers.cloudflare.com/workers/cache）。
• **可观测性：**Vinext 提供跨两种路由器的 Next.js 兼容追踪，确保现有 OpenTelemetry 和 Sentry 配置持续有效。在 Cloudflare Workers 上，追踪还能与原生 Workers Observability 集成。
• **Next.js 生态系统兼容性：**Vinext 实现了公开的 next/* 接口，支持认证、MDX、图像优化、字体、元数据、环境变量等常见 Next.js 模式。
• **Workers 的一流运行时支持：**虽然 Vinext 可在任何地方运行，但服务器代码可在开发与生产环境使用 Cloudflare workerd 运行时，直接访问图像优化和 Hyperdrive 等绑定资源。

我们还将迁移流程融入框架：仅需两条命令即可验证 Next.js 安装及所有修改的兼容性，并配置 Vite 和部署设置，同时保留原有的 Next.js 项目结构。

在与团队讨论重要功能时，我们发现一个现象：Next.js 16 坚持认为缓存组件是框架未来的重要组成部分，但我们接触的大多数团队并未使用它们，也不将其视为迁移前提。因此 Vinext 当前对驱动缓存组件的 “use cache” 指令支持有限，尽管我们会持续改进兼容性，但更专注于上述核心优先事项。

预渲染与缓存预热

首次发布 Vinext 时，它支持首次请求后的增量静态再生（ISR），但尚未在构建阶段渲染页面。应用使用 generateStaticParams() 和 getStaticPaths() 来识别构建时应渲染的页面，并期望页面级 ISR 将初始响应与后台及按需重新验证关联起来。

Vinext 1.0 支持两种路由器的完整生命周期：可在构建期间预渲染 App Router 和 Pages Router 路由，通过页面级 ISR 提供这些响应，并通过路径或标签使其失效。当需要完全静态站点时，也支持 output: "export" 模式。

但这引发了我们的思考：为何渲染必须发生在构建阶段？

拥有数万甚至数十万个可能 URL 的网站，可能耗费大量时间渲染低流量页面。构建过程无法评估大多数网站面临的长尾流量，因此无法将计算时间集中在少数更关键的页面上。最终导致用户在重要路由完成后仍需等待数小时，看着顺序构建逐步处理数千个页面。

缓存预热是我们的解决方案，它将页面预渲染从构建机器迁移至 Cloudflare 网络。开发者可继续使用 Next.js 原语来识别预渲染页面，Vinext 还能额外识别高流量页面加入该列表。这会在站点部署到生产环境前后台完成，确保上线瞬间即可从 Cloudflare 缓存提供快速响应。

在部署流程中，这通过上传新 Worker 版本并部署至 0% 生产流量实现，随后专门向该版本请求页面。渲染管道得以在真实用户访问新部署前开始工作。待缓存填充完毕，部署即可安全提升。

未来计划

如果说最初的一次性实验催生了 slopfork，那么更具意义的部分在于我们如何让这种自我改进过程持续运行。

该项目目前专注于保持框架与上游动态同步。Next.js canary 分支每日接收新提交。每天早上，代理会审查变更、获取差异，并为可能影响 Vinext 的项目创建跟踪议题。每晚兼容性矩阵都会通过针对 Vinext 运行 Next.js 测试套件重新生成。

当测试或议题暴露出不足时，代理现已能够识别两个代码库中的变更、构建复现环境、移植相关测试并提出修复方案。

该审查机制已帮助我们发现遗漏案例、不安全的缓存行为以及开发与生产服务器的差异。

自动化将活跃流聚焦为值得关注的变更集，使项目维护者能集中精力处理那些需要理解 Next.js 实现如何映射到 Vite 的议题。

我们正在 Cloudflare 构建开源软件工厂，您可在 GitHub（http://github.com/cloudflare/vinext）查看我们的进展。

试用指南

Vinext 适用于新应用和现有 Next.js 项目。

立即创建新应用：

npm create vinext-app@latest my-app

或迁移现有应用：

npx vinext check && npx vinext init

然后将其部署至 Cloudflare Workers，并启用缓存预热：

npx @vinext/cloudflare deploy --warm-cache

访问 vinext.dev（http://vinext.dev/）获取文档、示例和当前兼容性矩阵。Vinext 开源地址为 github.com/cloudflare/vinext（http://github.com/cloudflare/vinext）。欢迎提交议题、拉取请求、应用复现和反馈。