用途：针对 Next.js 应用做性能优化，聚焦 Core Web Vitals，并根据指标决定优化优先级：LCP 问题侧重图片和字体，INP 问题靠减少 JS 和使用 Server Components，CLS 问题靠补充尺寸和使用 next/font。
主要能力与用法：核心原则包括优先使用 Server Components，仅在需要浏览器 API 或交互时使用 'use client'；把 Client Component 尽量放在叶子节点；用 Suspense 边界开启流式与渐进加载；用 tags 做细粒度缓存失效；优化前后都用真实指标验证。技能按需加载参考文件，仅在该任务需要相应深度时才读取一个，例如 core-web-vitals.md、image-optimization.md、font-optimization.md、caching-strategies.md、server-components.md、streaming-suspense.md、bundle-optimization.md、metadata-seo.md、api-routes.md、nextjs-16-patterns.md。
常见改造包括：用 Server Component 内直接 async 取数替代 useEffect 加 fetch，用服务端直接访问数据库替代 useState 存数据，用 unstable_cache 或 ISR 替代客户端 fetch，用 next/image 替代 img 标签，用 next/font 替代 CSS 字体导入，用 dynamic() 替代重量级组件的静态导入。
限制与注意：Server Components 不能用浏览器 API、React hooks 和事件处理器，也不能用 ssr: false 的动态导入。图片的 priority 只用于首屏；外部图片需在 next.config.js 配置，使用 fill 之外必须提供宽高，动图 GIF 默认不优化。缓存标签需手动失效，开发环境数据缓存按请求隔离，Edge runtime 缓存行为不同，用户特定数据要谨慎缓存。动态导入可能影响关键内容的 SEO，部分库无法 tree shaking，Client Components 会增大包体积。
使用前建议先用 Lighthouse 分析、在 Chrome DevTools 或 PageSpeed Insights 查看 Core Web Vitals 并确定瓶颈。