nextjs-app-router-audit
Next.js App Router 代码质量与性能审计工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：nextjs-app-router-audit。 它的用途是：Next.js App Router 代码质量与性能审计工具 完整的 Skill 内容见：https://321skill.com/skills/nextjs-app-router-audit/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请帮我审计这个 Next.js 项目的 app/ 目录，找出所有性能问题和 RSC 边界错误。” 它会自动运行内置的扫描器，分析你的代码结构，识别出诸如“在客户端组件中错误使用 metadata”、“不必要的 ‘use client’ 指令”或“未优化的图片导致 LCP 问题”等具体问题，并按严重程度给出修复优先级和修改建议。
介绍
这个 Skill 专门用于审计 Next.js App Router 项目中的常见错误和性能陷阱。它解决了开发者在迁移或使用 App Router 时，因不熟悉新范式而导致的 React 服务器组件边界错误、请求瀑布流、客户端/服务器端反模式以及核心 Web 指标（Core Web Vitals）退化等问题，这些问题会直接影响网站的性能、SEO 和用户体验。
使用方式非常灵活。你可以将其作为独立的静态扫描器，在命令行中运行，快速生成包含错误、警告和建议的审计报告，并支持 JSON 格式输出以便集成到 CI/CD 流程中。同时，它也是一个 Claude Skill，你可以直接让 Claude 对你的 Next.js 项目进行审计，Claude 会运行扫描器并结合内置的手动检查清单，提供一份综合性的、按严重性排序的修复建议报告。
这个工具非常适合正在使用或计划使用 Next.js App Router 的前端、全栈开发者和技术负责人。无论是项目初期搭建、日常开发迭代，还是对遗留代码进行重构和性能优化，它都能帮助团队系统地发现并修复问题，确保项目架构的健壮性和最佳实践。
使用建议是，对于新项目，可以在关键提交或合并请求（PR）前运行审计，防止问题代码入库；对于现有项目，建议先进行一次全面扫描，优先处理标记为 ERROR 级别的问题，因为它们通常意味着功能缺失（如 SEO 元数据丢失）或严重错误。注意，静态扫描无法覆盖所有需要主观判断的场景，因此结合 Claude Skill 进行手动审查能获得更全面的结果。
核心特点
与通用的代码质量检查工具（如 ESLint）不同，它深度聚焦于 Next.js App Router 特有的陷阱（如客户端组件无法导出 metadata），并提供具体的、可操作的修复方案。其内置的“零依赖静态扫描器”可直接在 CI 中运行，无需安装到项目依赖，实现了开箱即用的轻量级审计。
注意事项
主要针对 Next.js App Router 项目，对于使用 Pages Router 或其它框架的项目不适用，且静态分析无法完全替代人工代码审查。
常见问题
这个工具需要安装到项目依赖里吗？
不需要，其扫描器是零依赖的，只需 Node.js 18+ 环境即可直接运行。
它和 Next.js 官方 ESLint 插件有什么区别？
官方插件侧重语法和基础规则，而这个工具更专注于审计 App Router 架构下的性能、SEO 和常见反模式等更高阶、更实际的问题。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/nextjs-app-router-audit/raw/index.md 读取 nextjs-app-router-audit 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/nextjs-app-router-audit/raw/index.md（查看排版版本）