跳到主要内容

Next.js 9 到 16 的版本演进

如果最早接触的是 Next.js 9.0，那现在回头看，变化其实非常大。

9.0 那一代的核心印象，通常还是：

  • 文件路由
  • SSR / SSG
  • API Routes
  • TypeScript 开始内建支持

到了 16，框架讨论的中心已经变成：

  • App Router
  • Server Components
  • 缓存与重验证
  • Turbopack
  • 代理边界
  • 构建适配与完整运行时模型

所以这条版本线，不只是功能变多了，而是 Next.js 的定位本身在变化。

一张表先看全局​

版本官方主线这一版最值得记住什么
9框架基础能力成型TypeScript 内建支持、动态路由、自动静态优化、API Routes
10体验和性能继续补齐next/image、i18n routing、Analytics、更顺的静态页面工作流
11工程稳定性继续上台阶next/script、Webpack 5 默认、图片能力增强、性能优化
12编译链开始 Rust 化SWC、Middleware、React 18 支持、AVIF、Bot-aware ISR
13架构方向开始明显转弯app 目录、Server Components、Streaming、Turbopack alpha
14App Router 进入可大规模落地阶段Server Actions 稳定、PPR 预览、Turbopack 大幅前进
15默认行为开始重写Async Request APIs、缓存默认值变化、React 19、next/form
16新主线进一步坐实Turbopack 默认、proxy.ts、缓存 API 收口、Build Adapters

Next.js 9​

发布时间：2019 年 7 月 8 日

官方在 9 这一版里给出的几根主线非常明确：

  • 内建零配置 TypeScript 支持
  • 文件系统动态路由
  • Automatic Static Optimization
  • API Routes

这一版为什么重要​

这是很多人第一次觉得 Next.js 不只是“SSR 套壳 React”。

从这一版开始，Next.js 把几件事情打包成一套比较顺手的默认能力：

  • 页面可以直接按文件组织
  • 动态路由不再高度依赖自定义 server
  • 一部分页面可以自动走静态输出
  • 后端接口可以先在同一个仓库里起步

如果当时正从 CRA、手写 Express SSR、或者自定义 React 路由方案迁过来，体感会很明显。

对旧项目的历史意义​

今天再看，9 像是“现代 Next.js 的地基版”。很多团队对 Next 的第一印象，其实就是从这里形成的。

Next.js 10​

发布时间：2020 年 10 月 27 日

官方重点：

  • next/image
  • 国际化路由
  • Next.js Analytics
  • React 17 支持
  • getStaticProps / getServerSideProps Fast Refresh
  • @next/codemod CLI

这一版为什么重要​

10 最关键的，不只是多了几个新 API，而是框架开始更主动地接管“性能默认值”。

尤其是 next/image 出现之后，图片优化不再只是工程约定，而是正式成为框架内建能力。国际化路由也把一类原本需要自己拼装的需求收进了官方主线。

版本观感​

如果说 9 更像“基础框架成型”，10 更像“开始把前端高频性能问题做成默认能力”。

Next.js 11​

发布时间：2021 年 6 月 15 日

官方重点：

  • next/script
  • next/image 图片能力增强
  • Webpack 5 默认启用
  • 性能继续优化
  • CRA 迁移实验能力

这一版为什么重要​

11 的风格比较克制，没有像 13 那样改动认知模型，但它很重要，因为工程默认值继续在变稳。

next/script 让第三方脚本加载策略更清楚，Webpack 5 默认化则是构建链的一次重要更新。对业务代码来说也许不够“轰动”，但对长期维护是好事。

版本观感​

11 像是一版典型的“工程质量加固版”。

Next.js 12​

发布时间：2021 年 10 月 26 日

官方重点：

  • Rust Compiler（SWC）
  • Middleware（beta）
  • React 18 支持
  • next/image AVIF 支持
  • Bot-aware ISR fallback

这一版为什么重要​

12 是一个很关键的转折点，因为编译链开始明显 Rust 化。

这意味着 Next.js 不再只是做上层框架能力，也开始深度改造底层工具链。之后 Turbopack 能继续推进，很大程度上也是因为 12 已经把这条路打开了。

对项目的直接影响​

  • 构建和 Fast Refresh 提速会更明显
  • Middleware 开始进入视野
  • React 18 相关能力可以提前接轨

版本观感​

12 是“性能基础设施翻新”的开端。

Next.js 13​

发布时间：2022 年 10 月 25 日

官方重点：

  • app 目录（beta）
  • Layouts
  • React Server Components
  • Streaming
  • Turbopack（alpha）
  • 新版 next/image
  • @next/font

这一版为什么重要​

13 是整个版本线里最像“分水岭”的一版。

从这一版开始，Next.js 的问题意识彻底变化了。它不再只是继续打磨 Pages Router，而是开始围绕：

  • 服务端组件
  • 布局复用
  • 流式渲染
  • 更少的客户端 JS
  • 更强的服务端边界

来重新设计框架。

这也是争议最多的一版​

因为它带来的不是局部能力升级，而是心智模型变化：

  • Server Component 和 Client Component 要分开理解
  • app 目录和 pages 目录可能并存
  • 数据获取、缓存、布局、错误边界的组织方式都在变

版本观感​

13 是架构换挡版。

Next.js 14​

发布时间：2023 年 10 月 26 日

官方重点：

  • Turbopack 大幅推进
  • Server Actions 稳定
  • Partial Prerendering（Preview）
  • App Router 教程体系补齐

这一版为什么重要​

14 的价值在于：13 提出来的很多想法，到了这一版才开始变得更适合真实项目落地。

尤其是 Server Actions 稳定之后，App Router 这一套不再只是“理念先进”，而是开始进入实际可维护的区间。

版本观感​

14 是“App Router 从概念走向可用”的关键一版。

Next.js 15​

发布时间：2024 年 10 月 21 日

官方重点：

  • Async Request APIs
  • 缓存默认值变化
  • @next/codemod 升级 CLI
  • React 19 支持
  • next/form
  • instrumentation.js 稳定
  • after()
  • Turbopack 开发态稳定

这一版为什么重要​

15 不像 13 那样重新发明架构，但它会真实影响大量存量代码。

因为这一版开始改默认行为：

  • 请求时 API 逐步异步化
  • fetch、GET Route Handlers、客户端导航缓存不再默认缓存

这意味着老项目升级时，很多“原来能跑”的地方，虽然语法不一定立刻报错，但运行语义已经变了。

版本观感​

15 是“把旧默认值翻出来重写”的一版。

Next.js 16​

发布时间：2025 年 10 月 21 日

官方重点：

  • Turbopack 稳定并默认启用
  • Cache Components
  • proxy.ts
  • Next.js Devtools MCP
  • Build / Dev 日志增强
  • React Compiler 支持稳定
  • Caching APIs 收口

这一版为什么重要​

16 不是继续试探，而是正式宣布新主线已经坐实。

几个信号很明显：

  • next dev 和 next build 默认进入 Turbopack
  • middleware 开始转向 proxy
  • PPR 试验路线收进 cacheComponents
  • 缓存 API 越来越像一套正式的应用层缓存模型

版本观感​

16 是“新框架主线开始默认化”的一版。

如果从 9.0 一路看到 16，可以怎么理解​

最直观的变化，大概有四条：

1. 从页面框架变成全栈框架​

9 那一代更多还是围绕页面渲染、路由、SSR 和轻量 API。

到了 16，Next.js 已经深度介入：

  • 缓存
  • 服务端组件
  • 服务端动作
  • 代理边界
  • 构建链
  • 运行时模型
  • 部署输出

2. 从 webpack 时代走向 Rust 工具链时代​

  • 11：Webpack 5 默认
  • 12：SWC 上场
  • 13：Turbopack alpha
  • 15：Turbopack 开发态稳定
  • 16：Turbopack 默认化

这条线很清楚：Next.js 在逐步把底层编译和构建链完全重写。

3. 从 Pages Router 走向 App Router​

  • 9 到 12：Pages Router 是绝对主线
  • 13：App Router 出现
  • 14：开始大规模可用
  • 15 / 16：围绕 App Router 的缓存、请求时 API、导航模型继续完善

4. 从“约定式 SSR”走向“完整渲染与缓存模型”​

老版本更关注：

  • 页面怎么渲染
  • 接口怎么接
  • 部署怎么做

新版本更关注：

  • 哪段逻辑发生在请求前，哪段发生在请求时
  • 哪些数据缓存，缓存多久，谁负责失效
  • 哪些组件留在服务端，哪些必须下放到客户端

当前最值得补的认知差异​

如果项目经验主要停留在 9 到 12，最值得优先补的是：

  1. App Router
  2. Server Components / Client Components
  3. Server Actions
  4. 缓存与重验证
  5. Turbopack
  6. 15 / 16 的升级语义变化

把这几块补上，旧经验和现在的官方主线就能重新接上。

参考资料​