Next.js 15(2024-2025):稳定 React 19 与生产工具链进化
Created on
Next.js 15 逐步把实验能力推向生产稳定:React 19 支持稳定、after() 稳定、Node.js Middleware 稳定、next build --turbopack 进入 beta。对于需要更好 DX 与构建性能的团队,15 是一个兼顾稳定与收益的版本。
适合谁
- 想稳定使用 React 19 的项目
- 对构建速度敏感,准备逐步尝试 Turbopack build
- 需要更清晰的请求生命周期(
after())和中间层鉴权
使用方式(快速上手)
- 升级:
npm install next@latest react@latest react-dom@latest - 15.1(2024-12-10):React 19 稳定、
after()稳定 - 15.5(2025-08-18):Node.js Middleware 稳定、
next build --turbopackbeta、Typed Routes 稳定
来源:https://nextjs.org/blog/next-15-1、https://nextjs.org/blog/next-15-5
核心能力与选择策略
after():响应流完成后再处理收尾逻辑,避免阻塞首屏- Node.js Middleware:可用 Node API 做更复杂鉴权/重定向
- Turbopack build beta:大项目构建提速,但建议先在 CI 旁路验证
- Typed Routes:路由类型安全,提前发现错误链接
- 选择建议:先稳定
after()与 Middleware,再灰度启用 Turbopack build
案例 1:SaaS 计费回调用 after() 做异步收尾
支付确认页需要尽快响应给用户,但还要做日志与风控上报。使用 after() 在响应流结束后执行收尾任务,避免阻塞渲染与首屏返回。
关键代码:
import { after } from "next/server";
export async function GET() {
after(async () => {
await sendBillingMetrics();
});
return new Response("ok");
}
来源:https://nextjs.org/blog/next-15-1
案例 2:企业门户用 Node.js Middleware 做鉴权
企业内网要求在边缘层拦截未登录请求。15.5 起 Node.js Middleware 稳定,允许使用 Node API 完成鉴权与重定向,适配复杂认证链路。
关键代码:
import { NextResponse } from "next/server";
export function middleware(req: Request) {
const auth = req.headers.get("authorization");
if (!auth) return NextResponse.redirect(new URL("/login", req.url));
return NextResponse.next();
}
来源:https://nextjs.org/blog/next-15-5
注意事项与实践建议
- Turbopack build 仍处于 beta,建议先在 CI 旁路验证与回滚策略
after()适合非关键链路收尾任务,不应承载必须完成的写操作- Middleware 逻辑应轻量,复杂鉴权可转移至专门服务
next lint已在 15.5 标记弃用,建议改为直接调用 ESLint/Biome- Typed Routes 需要开启
typedRoutes配置,建议在大型项目先局部试点
误区提示
- 不要把关键写操作放在
after()中,否则失败时难以察觉 - Turbopack build 提速明显,但不代表所有项目都会更快,先测再上
进一步阅读
- 15.1 发布说明:
https://nextjs.org/blog/next-15-1 - 15.5 发布说明:
https://nextjs.org/blog/next-15-5
小结
Next.js 15 的价值在“稳定与性能并行”:React 19、after()、Node.js Middleware 都是直接提升生产体验的能力,而 Turbopack build 则为大项目提供渐进式性能红利。