所谓 Next.js 16 SaaS boilerplate,指的是一套按 Next.js 16 的约定从头写好的启动代码,而不是把 package.json 里的版本号改成 16 的 Next.js 14 或 15 项目。这个区别很关键:框架大版本决定了你能原封不动保留多少模板代码。Next.js 16 删掉了同步请求 API,把 middleware.ts 改名为 proxy.ts,把 Turbopack 设为默认打包器,还用 Cache Components 取代了 PPR 开关。如果模板仍按旧约定编写,这些迁移工作第一天就会落到你头上,而这恰恰是你花钱想省掉的那部分。
本文讲三件事:Next.js 16 里哪些变化会被 SaaS 代码库直接感受到;一张用来验证模板是否真正基于 16 的清单;以及 NEXTY.DEV 对清单每一项的处理方式。
选模板时为什么要盯着框架大版本
模板的价值,等于从 git clone 到第一个付费用户之间的距离。作者没有吸收掉的每一个 breaking change,都会变成你的迁移任务,而迁移一份不是自己写的代码,比迁移自己的代码更慢。具体会有三个后果:
- 依赖。 认证、ORM、i18n、UI 库都需要各自发布与 React 19.2 和 Next.js 16 App Router 兼容的版本。模板若锁在旧的大版本上,你得逐个升级并收拾残局。
- 约定。
proxy.ts、异步params、并行路由的default.js,这些散落在每一个路由段里。修起来不难,但面很广。 - 维护周期。 早早跟上 Next.js 16 的作者,通常也会持续跟进 16.x 的小版本;还停在 15 的作者,到下一个大版本时同样会让你等。
Next.js 16 中会影响 SaaS 模板的变化
以下内容全部来自官方 发布文章 和 升级指南。每一项都附一句「对 SaaS 意味着什么」。
Turbopack 成为 dev 和 build 的默认打包器
next dev 和 next build 无需任何参数即使用 Turbopack。项目若带有自定义 webpack 配置,next build 会直接失败,除非显式传 --webpack。experimental.turbopack 也迁到了顶层的 turbopack 选项。
对 SaaS 的影响:模板常常带一些小的 webpack 调整,比如 SVG loader 或 Node polyfill。这些要么改写成 turbopack.resolveAlias 之类的配置,要么删掉。脚本里还写着 next build --webpack 的模板,说明迁移没做完。
proxy.ts 取代 middleware.ts
文件名和导出函数都改为 proxy。proxy 运行在 Node.js runtime 上,不支持 edge runtime。middleware.ts 在 edge 场景下仍可用,但已标记废弃。
对 SaaS 的影响:语言路由、登录跳转、限流拦截通常都写在这个文件里。Node runtime 意味着你可以在这里用 Node API,但模板里任何「只能跑在 edge」的假设都得重新审视。
同步请求 API 彻底移除
cookies()、headers()、draftMode()、params、searchParams 只能异步访问,Next.js 15 留下的兼容层已被删除。opengraph-image、icon、sitemap 里的 params 和 id 同样变成了 Promise。
对 SaaS 的影响:会话校验、租户查询、语言解析都在每个 layout 和 page 的开头读这些值。next-async-request-api codemod 能处理大部分,但模板本该一开始就是异步写法,让你根本不用跑这个 codemod。
Cache Components 取代 PPR 开关
experimental.ppr、路由级的 experimental_ppr 导出、experimental.dynamicIO、experimental.useCache 全部移除。Partial Prerendering 现在通过 cacheComponents: true 加 "use cache" 指令显式开启。缓存变成了 opt-in:page、layout、route handler 里的动态代码默认在请求时执行。
对 SaaS 的影响:默认请求时渲染,正是需要登录的 dashboard 应有的行为。开启 cacheComponents 不是简单改个名,它会对 <Suspense> 之外未缓存的数据报构建错误。所以模板要么有意采用它,要么干脆关掉,不该留着旧开关。
缓存 API:revalidateTag、updateTag、refresh
revalidateTag() 现在要求第二个参数传 cacheLife profile(如 revalidateTag('posts', 'max')),单参数写法已废弃。新增的 updateTag() 仅限 Server Actions 使用,提供 read-your-writes 语义;refresh() 则在 Server Action 里刷新未缓存的数据。
对 SaaS 的影响:设置表单、后台 CRUD、订阅状态,正是最需要 updateTag() 的场景。还在调用单参数 revalidateTag() 的模板,会直接报 TypeScript 错误。
React 19.2 与 React Compiler
Next.js 16 的 App Router 使用 React Canary 通道,包含 React 19.2 的特性(View Transitions、useEffectEvent、<Activity/>)。React Compiler 支持已稳定,通过 reactCompiler: true 开启,默认关闭。
对 SaaS 的影响:所有客户端依赖都必须兼容 React 19。老模板通常就是在这里出问题:某个表单库或 UI 套件的 peer dependency 还锁在 React 18。
工具链门槛与移除项
最低要求 Node.js 20.9+ 和 TypeScript 5.1+。next lint 命令移除,next build 不再执行 lint。AMP、serverRuntimeConfig、publicRuntimeConfig 移除,改用环境变量。并行路由的每个 slot 都必须有显式的 default.js。next/image 默认值也变了:minimumCacheTTL 改为 4 小时,qualities 改为 [75],默认禁止本地 IP 优化,重定向上限为 3 次。
对 SaaS 的影响:CI 镜像、lint 脚本、Dockerfile、环境变量策略都会被碰到。每一项都不难,但每一项都要花时间。
验证清单:模板是否真的基于 Next.js 16
买之前对着仓库跑一遍,或者对着作者给你看的 demo 仓库跑一遍。
| 检查项 | 看什么 | 为什么重要 |
|---|---|---|
| 仅 App Router | 没有 pages/ 目录,所有路由都在 app/ 下 | Next.js 16 的新特性(Cache Components、新缓存 API)只支持 App Router |
proxy.ts 而非 middleware.ts | 文件名为 proxy.ts,导出 export function proxy | middleware.ts 已废弃,运行时改为 Node.js |
| 异步请求 API | 全部使用 await params、await cookies()、await headers() | 同步访问已移除,旧的兼容层不存在了 |
| Turbopack 构建通过 | 脚本就是纯 next build,next.config 里没有 webpack() | 出现 --webpack 参数说明迁移没做完 |
| 依赖兼容 React 19.2 | 认证、ORM、表单、UI 套件都在 React 19 兼容版本 | peer dependency 冲突只会在安装或运行时才暴露 |
| i18n 基于新 API | 语言从 await params 解析,路由逻辑在 proxy.ts | 语言处理在每个请求上都会执行 |
| 没有已移除的配置 | 没有 experimental.ppr、experimental_ppr、next lint、serverRuntimeConfig | 这些在 16 上会导致构建或类型检查失败 |
| Node 20.9+ 全覆盖 | engines、Dockerfile、CI 矩阵 | Node 18 已不受支持 |
并行路由都有 default.js | 每个 @slot 目录下都有 | 缺失会导致构建失败 |
| 持续跟进 16.x 小版本 | changelog 里有 16.0 之后的更新记录 | 证明作者在维护,而不只是打了个 tag |
三条命令快速抽查:
ls proxy.ts middleware.ts pages 2>&1
grep -n '"next"\|"react"\|"react-dom"' package.json
grep -rn "next lint\|--webpack\|experimental_ppr" package.json next.config.* app 2>/dev/null
预期结果:proxy.ts 存在,middleware.ts 和 pages 不存在,next 是 16.x,react 是 19.2.x,最后一条 grep 没有输出。
NEXTY.DEV 如何处理清单里的每一项
NEXTY.DEV 是一套以一次性授权方式出售的 Next.js SaaS boilerplate,nexty.dev 官网本身就基于同一套模板构建。下面这些说法可以对着生产环境验证,而不是对着 PPT。
| 清单项 | NEXTY.DEV 的做法 |
|---|---|
| 仅 App Router | 所有路由都在 app/[locale]/ 下,没有 pages/ 目录 |
proxy.ts | 语言路由通过 next-intl 在 export async function proxy 中处理 |
| 异步请求 API | layout 和 page 一律先 await params 解析语言,再做其他事 |
| Turbopack 构建 | 纯 next build,没有自定义 webpack 配置 |
| React 19.2 依赖 | nexty.dev 运行在 Next.js 16.2 + React 19.2 上;Better Auth、Drizzle ORM、next-intl 4、AI SDK 均为 React 19 兼容版本 |
| i18n | 英文、中文、日文三语,基于 next-intl,语言来自 await params |
| 已移除配置 | 不存在任何已移除的开关;类型检查使用 tsc --noEmit |
在框架层之上,模板本身包含的能力如下(详见 文档):
- 认证。 Better Auth,支持 Google 与 GitHub OAuth、邮箱 OTP、Magic Link,并集成 Cloudflare Turnstile 以及登录的 IP 限流和用户限流。从 v3 起,Better Auth 与 Drizzle 取代了 v1、v2 基于 Supabase 的认证方案。
- 数据库。 Drizzle ORM,支持 Supabase、Neon 或自建 PostgreSQL,只需配置一个
DATABASE_URL。内置用户、来源追踪、定价方案、订单、内容等数据表。 - 支付。 Stripe、Creem、PayPal,覆盖月付、年付订阅、一次性付款以及面向按量计费的积分系统。定价方案在管理后台可视化管理,支持实时预览。
- AI。 Vercel AI SDK,接入 OpenRouter、Replicate、fal.ai,并附带对话、文生图、图生图、视频生成的演示页面。
- 内容。 MDX 静态博客加后台 CMS,支持访问控制(公开、登录可见、订阅者可见)、AI 翻译,以及草稿、已发布、已归档三种状态。
- 基础设施。 Cloudflare R2 文件存储加后台文件管理,Resend 邮件与订阅模块,Upstash Redis 缓存与限流,用户与管理员两套 dashboard。
- 部署。 支持 Vercel、Cloudflare Workers、Dokploy、Coolify。
价格只有一个数字:Pro 授权一次性支付 188 美元,终身更新,通过私有 GitHub 仓库的访问权限交付,并附带第二套模板 nexty-directory,用于导航站与列表类网站。另有一个功能精简的免费开源版(国际化、邮件订阅、分析、静态博客;不含数据库、认证、支付、AI、文件存储),适合不需要 SaaS 层的项目。详情见 定价。
项目还停在 Next.js 15 怎么办
两种情况,性质不同。
你买的是 NEXTY.DEV。 授权是私有仓库的永久访问权限。模板本身已经运行在 Next.js 16 上,之后的每一次升级都会进入同一个仓库,你直接下载新版本即可,不需要自己迁移模板。你手里唯一可能存在的 Next.js 15 代码,是基于模板早期版本已经开发出来的项目,这时要升级的是你自己的项目,而不是模板。
你用的是其他仍停在 15 的模板,或者手里有一个基于早期 Nexty 的旧项目,想升上来而不是重建。先跑官方 codemod,再单独跑异步请求 API 的 codemod,因为 upgrade codemod 不包含它:
npx @next/codemod@canary upgrade latest
npx @next/codemod@canary next-async-request-api .
完整步骤,包括让 next-devtools-mcp 的 agent 代劳大部分机械工作的做法,见 如何将 Next.js 15 项目升级到 Next.js 16。NEXTY.DEV 模板本身升到 16 用的就是这套流程,所以对基于模板开发的项目可以直接照搬。
FAQ
Next.js 16 拿来做生产环境的 SaaS 够稳吗
够。Next.js 16 于 2025 年 10 月发布,Turbopack 在 dev 和 build 两侧都已稳定,16.x 之后又发了多个小版本。NEXTY.DEV 与 nexty.dev 自 2025 年底起就在生产环境跑在 16 上。
用 Next.js 16 必须开启 Cache Components 吗
不必。cacheComponents 是 opt-in。不开的话,page 和 layout 默认在请求时渲染,这对需要登录的 dashboard 来说正合适。当你有能从 Partial Prerendering 受益的静态壳时,再有意识地开启。
Next.js 16 模板还能用 edge runtime 吗
proxy.ts 只跑在 Node.js 上。如果你需要在 edge 上拦截请求,middleware.ts 仍可用但已废弃。在托管平台支持的前提下,route handler 和 page 依然可以声明 edge runtime。
「终身更新」到底是什么意思
你会被加为私有 GitHub 仓库的协作者。所有更新,包括 Next.js 16 迁移和未来的大版本升级,都会落在那个仓库里,你按自己的节奏拉取即可。没有续费,没有订阅。
从哪里开始
如果你正在选模板,先拿上面的清单去核对候选项。如果你想要一套已经通过清单的,NEXTY.DEV 是一套基于 Next.js 16 与 React 19.2 的 Next.js SaaS boilerplate,Better Auth、Drizzle、Stripe、i18n、AI SDK、CMS、R2 都已就位。先读 介绍文档 看完整功能清单,准备好了再去对比 定价。


