Next.js 16:所有新东西都得硬着头皮接住
Next.js 16 掉下来了,毫无征求意见。官方文档把所有改动都塞进升级指南,不看就等着被打脸。少来那些市场用语:要想继续混,得先挺过这些。
环境:借口用完了
还在跑 Node 18?选错边了。Next.js 16 要求 至少 Node 20.9、TypeScript 5.1+,以及现代浏览器(Chrome/Edge/Firefox 111+、Safari 16.4+)。跟不上就卡死在 15,再送你一堆安全洞。别想讨价还价。
Turbopack 成为默认
忘掉 --turbopack。引擎在开发与构建中默认开启,配置挪到根节点(turbopack 取代 experimental.turbopack)。还死抱着自定义 webpack?构建现在会直接炸给你看。可以加上 --webpack 拖时间,但官方路线就是 Turbopack——开发环境带磁盘缓存,Sass 的波浪号 import 也说再见。
HTTP API 全面异步化
Next.js 15 给 cookies、headers、draftMode、params、searchParams 留了同步的后门。现在没了:全部改成 async,opengraph-image、twitter-image、icon、apple-icon 也不例外。还在用旧签名?准备到处撒 await。顺带 next typegen 会产出 PageProps、LayoutProps、RouteContext,省得你被类型淹没。
React 阵营:19.2 和稳定下来的编译器
Next.js 16 搭载 React 19.2(canary)和整套随行:View Transitions、useEffectEvent、Activity。更有 React Compiler 升格为稳定选项(reactCompiler: true)。是的,构建更慢,因为后面 Babel 还在转译,但你不再需要手动 memo 就能拿到自动 memoization。
Cache Components 与更聪明的导航
古董级 experimental_ppr 标志下线。换上 cacheComponents,启用最新的 Partial Pre-Rendering。SPA 跳转现在更机灵地预取:布局去重、增量 prefetch…… 请求数多了,流量却降了不少。想要体验?不用改一行代码就给你。
新缓存 API:revalidateTag、updateTag、refresh
缓存层开始健身:
revalidateTag(tag, cacheLife)接受时长配置,从容刷新。updateTag(tag)给 Server Actions 带来即时 read-your-writes。refresh()允许在 server action 后立刻刷新客户端路由。cacheLife与cacheTag总算甩掉unstable_的烙印。
趁现在梳理好你的 revalidation 策略,不然继续贴胶带,祈祷状态别炸。
middleware 死了,proxy 接班
middleware.{js,ts} 文件改叫 proxy。运行时锁死在 nodejs,edge 暂时出局。选项也同步改名:skipMiddlewareUrlNormalize 变成 skipProxyUrlNormalize。文档手把手教,但你还是得批量改文件名。
图片:全面收紧
被供起来的 next/image 也挨刀:
- 本地图片加 query string 必须配置
images.localPatterns.search。 minimumCacheTTL默认拉到 4 小时,防止重验证上头。imageSizes移除16,默认qualities只剩[75],没有dangerouslyAllowLocalIP就拦住本地 IP。- 重定向上限 3 次,
next/legacy/image退场。 images.domains被弃用,改用remotePatterns。
配置撒手不管?那就在生产环境等惊喜吧。
DX:dev/build 分离输出、ESLint 自己搞、滚动保持原样
next dev 和 next build 现在写入不同目录(开发用 .next/dev),互相上锁避免同时跑。next.config 的加载流程也被梳理一遍,process.argv.includes('dev') 那些小把戏可以收山了。
Linting 方面 next lint 被砍掉。改用原生 ESLint CLI(或者自虐选 Biome),并接受 @next/eslint-plugin-next 强推的 flat config。想继续强制瞬间滚动,就在 <html> 上加 data-scroll-behavior="smooth",Next.js 终于不碰你的 CSS。
Alpha 附赠与残渣
- Build Adapters API (alpha):让你的基础设施有机会插手构建流水线的实验性钩子。
- 现代化 Sass API,多亏
sass-loaderv16。 - AMP、
next lint、serverRuntimeConfig/publicRuntimeConfig、那些怪异的devIndicators、experimental.dynamicIO、unstable_rootParams通通进垃圾桶。
想要所谓“全栈框架”?Next.js 16 再次告诉你谁说了算。乖乖升级——npm install next@latest react@latest react-dom@latest,用 TypeScript 的顺便装 @types,再跑 npx @next/codemod@canary upgrade latest。不愿意的话,就旁边嘟囔去吧。下一波更新见。