SuperAPI AI 工具集

nextjs

前端与建站

查看项目

更新于 10-16 03:14

技能介绍

用途:该技能聚焦 Next.js 16(App Router)的破坏性变更与知识盲区,帮助从 Next.js 15 及更早版本迁移,避免升级报错。要求 Node.js 20.9+、React 19.2+、TypeScript 5.1+。

主要能力:讲解异步路由参数(params、searchParams、cookies()、headers()、draftMode() 均需 await);middleware.ts 迁移为 proxy.ts(函数名 middleware 改为 proxy,matcher 配置不变);并行路由必须提供 default.js;Cache Components 与 "use cache" 指令(组件级、函数级、页面级缓存及 PPR);缓存 API 更新,revalidateTag() 需第二个 cacheLife 参数(如 'max'),新增仅用于 Server Actions 的 updateTag()(立即刷新、read-your-writes)与 refresh()(仅刷新未缓存数据);Route Handlers 中 params 与 headers() 异步化;React 19.2 特性(View Transitions、useEffectEvent()、React Compiler);Turbopack 在 16 中稳定并默认;next/image 默认值变化(TTL 由 60 秒改为 4 小时、imageSizes 缩减、qualities 仅 75);已移除 AMP、next lint、serverRuntimeConfig/publicRuntimeConfig、experimental.ppr 等。

使用方式:按需查阅对应章节与模板;迁移可运行 npx @next/codemod@canary upgrade latest 自动处理部分改动;检查版本用 node --version、npx next --version。

适用场景:Next.js 16 应用开发、15 到 16 迁移、缓存与并行路由排错。

限制:仅覆盖 App Router,不含 Pages Router;不涉及 Cloudflare Workers 部署、认证、数据库、UI 组件库、状态管理、表单库、Vercel 专有功能与企业版特性,这些需配合其他技能或官方文档。