源自 GitHubNext.js应用路由架构规范
用于指导开发者构建或重构 Next.js App Router 全栈应用。用户提供页面结构、数据请求或业务逻辑需求，本功能依照 Next.js 规范生成服务端组件、Server Actions、Route Handlers 以及 proxy.ts 边界拦截代码，并精准配置数据流式渲染与缓存失效机制，确保应用架构健壮、性能优异。需具备 React 及 TypeScript 基础知识。
常见场景
它能帮你做什么？
01
服务端组件与流式渲染重构：将客户端渲染页面改写为异步服务端组件配合Suspense流式加载，提升首屏速度。
02
Server Actions与缓存刷新：设计安全的数据表单提交操作，并在变更后通过revalidatePath精确清除路由缓存。
03
请求边界代理配置：编写proxy.ts文件替换旧版中间件，在Node.js运行时实现鉴权拦截与路由重定向。
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“为用户中心模块设计基于Next.js App Router的目录结构，并用proxy.ts实现未登录重定向”
“编写一个创建文章的Server Action，并在提交后触发/posts路由与dashboard标签的缓存刷新”
“将原本客户端拉取数据的仪表盘页面改写为服务端组件并行获取数据并配置Suspense骨架屏”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
