Cloudflare 掀桌子了,Next.js 迎来重大变化,尤雨溪都说酷!

Vite 作为 2025 年满意度最大的技术,下载量已经超过的 webpack,加入 Vite 工具链变成一种趋势,而这次是 Nextjs!

Next.js 13.4 之前,webpack 是默认的构建工具,Next.js 13.4 及以上版本引入了 Turbopack 作为开发环境的默认工具,但生产环境目前仍主要依赖 webpack 进行最终打包。

2 月 25 日,Cloudflare 发布了 Vinext

在 Vite 上重新实现了 Next.js 的 API,让开发者可以脱离官方的 webpack 和 Turbopack,转而使用 Vite 来 构建 Next.js 应用。

AI 开发,人类主导

Vinext 是一个极具探索性的项目。

使用 Claude Code 开发:

  • 绝大部分代码
  • 测试
  • 文档
  • 一周内完成

架构、优先级和设计决策则由人类主导。

AI驱动的开发过程

  1. 适配 AI 开发的条件:Next.js 文档/测试完善、Vite 提供坚实基础、新一代 AI 模型可处理大型代码库复杂度
  2. 开发流程:定架构拆任务AI写代码+测试自动验证+迭代
  3. 投入:800+ 次 OpenCode 会话,代码通过严格的测试、类型检查与CI验证

AI 完成代码评审,人工把控方向与纠错。

Vinext 的核心

Vinext 底层基于 Vite 开发,开发者可以直接享受到 Vite 庞大的、干净且标准化的插件生态。

对于 Next.js 来说,目前的痛点:

  • 本地服务器启动慢
  • HMR 速度慢
  • 无服务器生态适配难
  • 与 Vercel 强绑定,部署至第三方平台配置复杂
  • 适配方案 OpenNext 成本高、维护困难
  • 开发与构建流程与 Node.js 强绑定,跨平台体验差

而 Vinext 的优势非常明显👇🏻

极致的性能表现

vinext 通过底层重构,显著提升了 Next.js 在开发和生产阶段的性能指标。

  • 构建速度飞跃:生产环境提速 4 倍
  • 包体积更小:体积比原生 Next.js 缩小了 57%
  • 瞬时 HMR:开发环境下,瞬时热更新,极致的开发体验。

边缘原生,解决部署痛点

  • 零冷启动部署:几乎没有冷启动延迟。
  • 开发生产一致性:支持在开发环境调用 Cloudflare 的平台 API,避免开发环境和生产环境不一致的尴尬。
  • 脱离厂商锁定:不和 Vercel 强绑定,可自由地部署在第三方平台。

创新技术:流量感知预渲染

这是 Vinext 最具差异化的技术优势:

  • 精准优化:通过真实分析数据,识别出那些 10% 贡献了 90% 流量的热门页面。
  • 按需生成:预渲染高频页面,保证用户的极速体验,缩短大型站点构建时间,避免冷门页面的浪费。

迁移与兼容成本极低

  • 无感迁移:支持一键转换,不破坏原有的 Next 配置,做到共存
  • 高覆盖率 API:实现了约 94% 的 Next.js 16 API
  • AI 赋能:专门的 AI Agent Skill,让 AI 助手自动处理迁移冲突

快速上手

安装:

bash 复制代码
npm install vinext

替换 Next:

json 复制代码
{
  "scripts": {
    "dev": "vinext dev",
    "build": "vinext build",
    "start": "vinext start"
  }
}

核心命令:

bash 复制代码
# 启动开发环境
vinext dev   
# 构建打包
vinext build
# 构建并部署的到 Cloudflare Workers
vinext deploy       

AI 迁移助手

用 AI 助手帮助你将旧项目迁移至 Vinext。

安装 AI Skills

bash 复制代码
npx skills add cloudflare/vinext

在AI编码工具执行迁移命令,自动完成适配

bash 复制代码
npx skills add cloudflare/vinext

总结

cloudflare 推出 Vinext 无疑是开始掀桌子了,在发布后就获得了广泛的讨论,虽然该项目还处在实验阶段,但已经有一些项目开始使用了。

对于 Next.js 开发者,如果你想体验:

  • Vite 生态
  • 极致的开发体验
  • 高效的打包构建
  • 零启动的 Cloudflare 访问

不妨关注一下这个项目。

相关推荐
雪隐19 分钟前
个人电脑玩AI-16让5060 Ti给你打工——MiniMax H3 提速实录:从"泡杯茶等视频"到"视频等你",一张 5060 Ti 的自我修养
前端·人工智能·后端
FungLeo39 分钟前
Flutter Web 中文字体困境与渲染器选择:CanvasKit vs HTML renderer 实战
前端·flutter·html
敲代码的玉米C1 小时前
我修的那个 bug,制造了另一个 bug
前端·人工智能·架构
gis开发之家1 小时前
《Vue3 从入门到大神50篇》Vue3 源码详解(二十):生命周期钩子源码解析 —— onMounted / onUpdated 如何实现?
前端·javascript·前端框架·vue3·vue3源码
Narrastory1 小时前
我用 Claude Code 写代码不到 2 小时,却花了 3 天做完这个软件—Vibe Coding 的正确姿势,是设计不是生成
前端·人工智能·github
Enaium1 小时前
我实现了KMP的SDL绑定并编写了高性能软光追
前端·kotlin
古夕1 小时前
本地正常线上白屏:一次路由切换后刷新恢复问题的排查与修复
前端·ai编程
栀鸢ouo1 小时前
解决Element Plus表格展开行横向溢出、滚动截断问题(项目实战方案)
前端·vue.js
用户39051332192882 小时前
写了5年JS,才发现这10个方法能少写一半代码
前端
平凡的阿泽2 小时前
我用TRAE Work手搓了一个「谁是卧底」小游戏
前端·javascript