源自 GitHubNext.js架构规范设计
本能力专注于 Next.js App Router 的架构规范与代码设计。它能根据业务模块特性，指导服务端组件（RSC）与客户端组件（Client Component）的拆分决策，规范基于 fetch 与 Server Actions 的数据请求与突变逻辑，规划路由组、并行路由与拦截路由的文件目录结构，并提供缓存刷新策略与性能调优建议，避免滥用客户端渲染与打包体积膨胀问题。
常见场景
它能帮你做什么？
01
页面渲染模式拆分决策：根据页面交互与数据敏感度，精准划分服务端组件与客户端组件边界，缩减客户端打包体积。
02
复杂路由体系规划构建：合理设计路由组、并行路由与拦截路由的文件目录结构，实现灵活的弹窗覆盖与多屏并列展示。
03
数据流与缓存失效控制：规范 Server Actions 突变流程，搭配精准的标签刷新机制，避免请求瀑布与缓存不一致。
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“我需要开发一个用户设置中心页面，包含头像上传表单和个人信息读取，请帮我按 Next.js App Router 规范拆分服务端和客户端组件并设计 Server Action 代码结构”
“请帮我规划一个电商商品详情页的文件目录，包含路由组、loading.tsx 骨架屏、动态 metadata SEO 生成以及 ISR 增量静态更新策略”
“现有页面加载很慢，请根据 Next.js 最佳实践检查我的数据请求链路，并给出将客户端 fetch 重构为服务端数据预取的方案”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
