SuperAPI AI 工具集

nextjs

前端与建站

查看项目

更新于 10-16 03:05

技能介绍

用途:在编写或审查 Next.js 代码时应用最佳实践,覆盖 App Router 的路由、Server Components、Server Actions、缓存与数据模式等。

主要能力:按主题提供规则文件,包括文件约定(项目结构、特殊文件、动态/捕获/分组路由段、并行与拦截路由、v16 中 middleware 更名为 proxy);RSC 边界检测(异步客户端组件、不可序列化 props、Server Action 异常);Next.js 15+ 异步 API(异步 params 与 searchParams、异步 cookies() 与 headers()、迁移 codemod);运行时选择(默认 Node.js,何时用 Edge);指令('use client'、'use server'、'use cache');函数(导航 hooks、服务端函数、generateStaticParams、generateMetadata);错误处理(error.tsx、global-error.tsx、not-found.tsx、redirect、notFound、forbidden、unauthorized、unstable_rethrow);数据模式(Server Components 与 Server Actions 与 Route Handlers 的取舍、避免数据瀑布、客户端取数);Route Handlers;元数据与 OG 图片;图片优化(next/image、远程图片配置、sizes、模糊占位、LCP 优先级);字体优化(next/font、Google 与本地字体、Tailwind 集成);打包(服务端不兼容包、CSS 导入、polyfill、ESM/CommonJS、包分析);脚本(next/script、内联脚本 id、加载策略、@next/third-parties 接入 Google Analytics);水合错误排查;Suspense 边界;并行与拦截路由(模态框模式、default.tsx、router.back());自托管(output: 'standalone' 用于 Docker、多实例 ISR 的缓存处理器);调试技巧(MCP 端点、--debug-build-paths 重建特定路由)。

使用方式:作为技能/插件加载后,在编写或审查 Next.js 代码时按上述主题查阅对应规则文件。资料未提供具体安装命令与调用步骤。

适用场景:Next.js App Router 项目的开发、调试与架构设计。

限制:资料未说明收费、价格、支持平台与效果保证;部分内容针对特定版本(如 v16 的 middleware 更名、Next.js 15+ 异步 API),需注意版本差异。