Next.js 性能优化助手 Skill 技能

技能简介

atman36-nextjs-optimization 是专注 Next.js 生产环境性能优化的 Skill，引导 Claude、Codex、Claude Code 系统性排查包体过大、缓存失效、媒体未优化等常见拖慢问题。它不追求虚高的跑分，而是围绕真实用户体感给出可落地的优化路径：从渲染策略选择到图片字体配置，从动态导入到缓存规则，最终产出一份带问题、修复方案、影响预估和后续步骤的结构化报告。Skillstore 质量分 80（silver 档），版本 1.0.0，MIT 许可，安全审计已完成，浏览量 307、下载 46，在同类技能中热度靠前。

核心能力

• 版本与路由体检：核查 Next.js 版本、App Router 使用情况与 Pages Router 遗留痕迹。
• 渲染策略优化：针对服务端组件、客户端组件、SSG、ISR 给出更合适的渲染方式建议。
• 媒体与配置调优：改进图片、字体、缓存、metadata 与生产构建配置。
• 包体积瘦身：通过动态导入和更精确的导入路径找到可削减的 bundle 体积。
• 结构化报告：输出问题清单、修复动作、影响估计和下一步行动，方便团队分派执行。

安装配置

1. 执行 npx skillstore add ai-vibe-prompts/atman36-nextjs-optimization 安装。
2. 技能需要读取项目文件，确保 Agent 有仓库访问权限和可用的构建/审计工具链。
3. 优化效果依赖真实构建测量，建议本地能跑 next build 与 Lighthouse 之类的测量工具。
4. 该技能面向 Next.js 15 与 App Router 模式，老项目可能需要适配。

使用步骤

1. 基础性能审计：让 Agent 检查图片、字体、metadata、缓存配置，先拿到按优先级排序的修复清单。
2. Core Web Vitals 专项：针对主路由排查 LCP、FID、CLS 问题，给出能提升 Lighthouse 分数的改动。
3. App Router 渲染评审：找出多余的客户端组件、缺失的 Suspense 边界和更优的静态/动态渲染选择。
4. 制定生产优化方案：产出包含包体风险、缓存策略、图片字体修复、SEO metadata 与验证步骤的完整报告。
5. 改动后复测：用生产构建重新测量，确认优化前后的真实差异。

适用场景

• 上线前冲刺：对候选生产版本做图片、字体、缓存、构建配置的全面体检。
• Core Web Vitals 提升：通过渲染、媒体、脚本加载方式的改动改善 LCP/CLS。
• 客户端包体治理：识别过大组件、不必要的客户端边界和冗余导入。
• SEO 与 metadata 修复：补齐结构化 metadata，改善搜索展示。

适用人群

Next.js 全栈开发者、前端性能负责人、准备上线的产品团队，以及需要快速交付性能优化报告的 AI 编程用户。

工作原理

技能按"检查—定位—修复—验证"推进：先审查版本与路由结构，再逐项核对渲染策略、媒体配置、缓存规则和包体构成，识别问题后生成带影响预估的结构化报告。它明确区分"指导"与"测量"——所有优化建议都需要用生产构建实测验证，不承诺脱离测量的分数提升，也提醒不要在不了解新鲜度要求的情况下乱加缓存规则。

官方链接

• 技能主页：https://skillstore.io/skills/atman36-nextjs-optimization
• 源码仓库：https://github.com/Atman36/AI-Vibe-Prompts