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

不妨关注一下这个项目。

相关推荐
咩咩啃树皮1 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构
java·前端·架构
阳光是sunny1 小时前
LangGraph中的Reducer是什么
前端·人工智能·后端
触底反弹1 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
阳光是sunny1 小时前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
小林ixn2 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker2 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
এ慕ོ冬℘゜3 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
武子康3 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端
一点一木4 小时前
从60首歌到1个网站:输入你的故事,还你一首歌
前端·github
IT_陈寒5 小时前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端