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 访问

不妨关注一下这个项目。

相关推荐
用户221765927925 小时前
css border-left 怎么设置 border 展示为椭圆
前端
御形封灵5 小时前
纯CSS实现方块下落等待动画
前端·css
Luna-player5 小时前
gitee上的vue项目,刚刚创建了一个分支,怎么在本地上拉取分支项目
前端·vue.js·gitee
转角羊儿5 小时前
CSS补充重要知识
前端·css
小金鱼Y5 小时前
从进程线程到 async/await,一文吃透前端异步核心原理
前端·javascript
SuperEugene6 小时前
前端代码注释规范:Vue 实战避坑,让 3 年后的自己还能看懂代码|项目规范篇
前端·javascript·vue.js
掘金一周6 小时前
吃龙虾🦞咯!万字拆解OpenClaw的架构与设计 | 掘金一周 3.19
前端·人工智能·后端
kyriewen6 小时前
JavaScript 数据类型全家福:谁是大哥大,谁是小透明?
前端·javascript·ecmascript 6
用户8631263327686 小时前
假设我要实现一个agent群体
前端