Next.js App Router 写代码总踩坑？这个 38K 星 skill 帮你划清楚边界

写 Next.js 14+ 代码，你有没有遇到过这种情况——Server Component 和 Client Component 混在一起，结果边界模糊、性能反而变差？或者 SSR/SSG/ISR 混用时，不知道什么时候该用哪种渲染模式？

这个 skill——nextjs-app-router-patterns，就是来解决这些问题的。它来自 wshobson/agents 仓库（⭐ 38K+，质量相当高），专门给 AI 编程助手用，让 AI 在帮你写 Next.js 时能自动遵循 App Router 的最佳实践。

这个 skill 解决什么问题？

App Router 是 Next.js 13 以后的核心架构，但上手门槛不低。Server Components 和 Client Components 的边界怎么划？Streaming 什么时候用？Parallel Routes 怎么搭？这些问题搞不清楚，代码就会越写越乱。

这个 skill 把 Next.js 14+ App Router 的核心模式全部整理成结构化知识，AI 在帮你写代码时会自动触发这些模式，不用你每次都手动说”用 Server Component”。

核心内容一览

• 渲染模式选择：Server Component / Client Component / Static / Dynamic / Streaming——什么场景用哪种，表格直接给你列清楚
• 文件约定：layout.tsx、page.tsx、loading.tsx、error.tsx、route.ts 等，每个文件的作用和用法
• 8 个关键模式：Server Components 数据获取、Client Components 边界、Server Actions、并行路由、拦截路由（模态框场景）、Suspense 流式渲染、Route Handlers、Metadata/SEO
• 缓存策略：ISR、基于标签的失效、Server Actions 触发的按需重新验证
• Do’s & Don’ts：不该在 Server Component 里传不可序列化数据、不该在 Client Component 里直接 fetch——这些坑 skill 里都有

怎么安装？

一行命令搞定：

npx skills add wshobson/agents --skill nextjs-app-router-patterns -g -y

安装完，在 Claude Code 里只要提到 Next.js、App Router、Server Components 等关键词，AI 会自动调用这个 skill 的知识。

适合谁用？

所有用 Next.js 13/14/15 开发的团队和个人。强烈推荐给：正在从 Pages Router 迁移到 App Router 的开发者、以及想用 AI 高效产出生产级 Next.js 代码的朋友。

作者 wshobson 同时还维护了 interaction-design、prompt-engineering-patterns 等多个高质量 skill，是一个值得关注的开发者。

https://github.com/wshobson/agents

GitHub: https://github.com/wshobson/agents