SuperAPI AI 工具集

nextjs

前端与建站

查看项目

更新于 10-15 23:59

技能介绍

用途:在编写或审查 Next.js 代码时应用最佳实践,适用于构建、调试和架构 Next.js 应用。

主要能力(按主题分文件):文件约定(项目结构、特殊文件、动态/捕获/分组路由段、并行与拦截路由、v16 中 middleware 更名为 proxy);RSC 边界(检测异步客户端组件、不可序列化 props、Server Action 异常等无效模式);异步模式(Next.js 15+ 的异步 params 与 searchParams、异步 cookies() 与 headers()、迁移 codemod);运行时选择(默认 Node.js,何时用 Edge);指令('use client'、'use server'、'use cache');函数(useRouter、usePathname、useSearchParams、useParams 等导航钩子,cookies、headers、draftMode、after 等服务端函数,generateStaticParams、generateMetadata 等生成函数);错误处理(error.tsx、global-error.tsx、not-found.tsx,redirect、permanentRedirect、notFound,forbidden、unauthorized,catch 块中的 unstable_rethrow);数据模式(Server Components 与 Server Actions 与 Route Handlers 的取舍,用 Promise.all、Suspense、preload 避免数据瀑布,客户端组件数据获取);Route Handlers(route.ts 基础、GET 与 page.tsx 冲突、无 React DOM 的环境行为、与 Server Actions 的取舍);元数据与 OG 图片(静态/动态 metadata、generateMetadata、next/og、基于文件的元数据约定);图片优化(优先 next/image、远程图片配置、响应式 sizes、模糊占位、LCP 优先加载);字体优化(next/font、Google 字体与本地字体、Tailwind 集成、子集预加载);打包(服务端不兼容包、CSS 导入、polyfill、ESM/CommonJS、包分析);脚本(next/script 与原生标签、内联脚本需 id、加载策略、@next/third-parties 接入 Google Analytics);水合错误(常见成因与修复、错误浮层调试);Suspense 边界(useSearchParams 与 usePathname 的 CSR bailout、哪些钩子需要边界);并行与拦截路由(@slot 与 (.) 拦截器的模态框模式、default.tsx 回退、用 router.back() 关闭);自托管(Docker 用 output: 'standalone'、多实例 ISR 的缓存处理器、可用与需额外配置项);调试技巧(AI 辅助调试的 MCP 端点、用 --debug-build-paths 重建特定路由)。

使用方式与限制:资料未提供具体安装命令、调用方式或收费信息,暂未提供。内容以规则与分文件参考形式给出,需结合具体 Next.js 版本使用。