nextjs-cache-architecture
Next.js 16+ App Router缓存架构设计实现助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：nextjs-cache-architecture。 它的用途是：Next.js 16+ App Router缓存架构设计实现助手 完整的 Skill 内容见：https://321skill.com/skills/nextjs-cache-architecture/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我设计Next.js 16 App Router的用户订单数据缓存方案，包含标签注册和按需重验证逻辑'，它会输出符合最佳实践的架构设计、可直接复用的代码模板，并标注常见避坑点。
对AI说：'帮我排查页面一直显示旧数据的缓存问题'，它会引导你逐步检查缓存边界、重验证配置，快速定位问题根源。
介绍
Next.js 16+ App Router的缓存机制涉及标签注册、边界划分、重验证等多个环节，逻辑复杂易出错，开发者常遇到陈旧数据难以排查、缓存策略不合理导致性能不佳的问题，该Skill正是为解决这些缓存相关的设计、实现、排障痛点而生。 通过npx命令安装到项目后，它会提供核心架构指引、标准化落地步骤、常见误区说明，同时内置可直接复用的代码模板、静态审计脚本，参考资料可按需加载，辅助开发者完成缓存方案的全流程落地。 适合使用Next.js 16+ App Router开发Web应用的前端开发者、全栈工程师，尤其是需要处理复杂数据缓存、高频数据更新场景的开发人员。 使用前需确保项目已在next.config.ts中开启cacheComponents配置，应用方案后可运行内置审计脚本校验实现是否符合规范，排查陈旧数据问题时可优先参考内置的排障指引。
核心特点
不同于通用的Next.js缓存教程，它内置可直接复用的缓存模板、静态审计脚本，覆盖从架构设计到落地校验、陈旧数据排障的全流程，严格适配Next.js 16+的最新缓存特性。
注意事项
仅支持Next.js 16+ App Router模式，不兼容Pages Router、Edge运行时及静态导出场景。
常见问题
这个Skill支持Next.js Pages Router吗？
不支持，仅适配Next.js 16+版本的App Router模式。
如何校验缓存实现是否符合规范？
可运行内置的skills/nextjs-cache-architecture/scripts/audit.mjs静态审计脚本。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/nextjs-cache-architecture/raw/index.md 读取 nextjs-cache-architecture 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/nextjs-cache-architecture/raw/index.md（查看排版版本）