SuperAPI AI 工具集

nextjs-knowledge-patch

编程与开发

查看项目

更新于 10-16 01:35

技能介绍

用途:在修改现代 Next.js 应用时使用本补丁,尤其适用于迁移请求 API、采用 Cache Components、配置 Turbopack,或调试路由与渲染行为。

主要能力:按主题提供参考,包括迁移与运行时(运行时下限、移除项、异步请求 API、Proxy 迁移、安全更新、升级)、路由与渲染(Link 导航、路由回退、全局 not-found、错误边界、过渡、滚动)、缓存与预取(Cache Components、缓存键与生命周期、标签失效、路由预取、即时路由)、打包与构建(Turbopack、构建适配器、worker、SRI、loader、编译器缓存、Service Worker)、类型与配置(类型化路由、生成的路由 props、类型生成、配置标志)、工具与可观测性(instrumentation、日志、检查器、分析器、DevTools、浏览器工具、测试)、图像 CSS 与资源(图像安全与默认值、ImageResponse、图标、Sass、Lightning CSS、PostCSS)。

迁移优先级:将请求拦截重命名为 proxy.ts,放在 app 或 pages 旁(项目根或 src 下),导出 proxy 或默认函数;Proxy 用于依赖请求的重写、重定向、请求头和乐观检查,慢速数据获取与完整授权应留在应用代码中,Proxy 中 fetch 缓存、重新验证和标签无效。请求 API 改为异步:await params、searchParams、cookies()、headers()、draftMode()。修复硬构建失败与移除项:为每个并行路由槽添加 default.js;用 ESLint CLI 或其他 linter 替换 next lint;将 Turbopack 选项移至顶层 turbopack;用环境变量替换 serverRuntimeConfig 和 publicRuntimeConfig;移除 AMP、experimental.ppr、unstable_rootParams() 等。运行时下限:Node.js 20.9+、TypeScript 5.1+、Chrome/Edge/Firefox 111+、Safari 16.4+。

Cache Components:需先启用 cacheComponents: true 才能使用 use cache;缓存键由编译器生成,不要手动组装;在缓存作用域外解析 cookies()、headers() 和请求时 searchParams,再传入可序列化值。生命周期与失效:updateTag(tag) 仅限 Server Actions,refresh() 仅限 Server Actions,revalidateTag(tag, profile) 用于服务端代码;单参数 revalidateTag(tag) 已弃用。

导航与预取:使用 onNavigate 处理 SPA 导航守卫,useLinkStatus() 暴露待定状态,prefetch="auto" 显式请求默认自动行为,router.prefetch(href, { onInvalidate }) 可刷新过期的预取数据。

类型与配置:顶层启用 typedRoutes: true;生成 PageProps、LayoutProps、RouteContext 等无导入辅助类型;可用 next typegen && tsc --noEmit 生成路由类型。

Turbopack 与构建:生产构建始于 next build --turbopack;开发文件系统缓存默认开启;Turbopack 下自动检测并启用 Babel 配置;serverExternalPackages 可外部化传递依赖;构建适配器可调整配置或处理输出。

诊断与文档:项目根放置 instrumentation-client.js 或 .ts;使用 next build --debug-prerender、next dev --inspect、next start --inspect、next experimental-analyze;已安装文档位于 node_modules/next/dist/docs/。

安全:React Server Components 安全更新应视为紧急,关键远程代码执行问题影响 Next.js 15.x 和 16.x,旧版本还受拒绝服务与源码暴露问题影响,应立即升级到已修补版本。

限制:本资料为知识补丁参考,未提供具体收费、价格、平台或效果信息;部分细节需查阅对应参考文件。