Next.js 15/16 写不好？这个 Skill 帮你把 Claude 调教成框架老手

如果你最近也在写 Next.js 15/16，一定被 App Router 那些新坑折腾过：Server Component 和 Client Component 到底怎么拆分、loading.tsx 和 <Suspense> 该用哪个、Server Actions 里的 revalidate 到底怎么触发起作用……

我最近挖到一个非常「开发者向」的 Skill：web-meta-framework-nextjs，来自 Agents Inc 官方技能库，专门教 Claude Code 理解并遵循 Next.js 最新框架模式。

它能做什么

这个 Skill 不是把 Next.js 文档照搬一遍，而是把 15-16 版本 App Router 的生产经验 打包成一套可执行的规则。核心覆盖：

• 文件路由：App Router 的目录约定与动态路由写法
• Server / Client 组件边界：默认用 Server Component，只在需要状态/事件时加 "use client"
• Streaming 与 Suspense：路由级 loading 与组件级流式渲染的取舍
• Metadata API：SEO 元数据、并行路由的配置方式
• Server Actions：mutations、revalidate、cache 的联动关系
• Cache Components：Next.js 15 新增的缓存语义与正确用法

谁适合装

如果你平时用 Claude Code 写 Next.js 项目，但又总感觉它写出来的代码「像 React 不像 Next.js」——比如乱加 "use client"、把 Server Actions 写成了普通 API Route——这个 Skill 就是你的补丁。

它把框架约定内化成 Claude 的「肌肉记忆」，不用你每次都重复解释「这里是 RSC 边界，不能直接写 useState」。

怎么用

两种方式都可以：

• 通过 Claude Code 插件市场直接安装 agents-inc/skills 后选对应 skill
• 用 Agents Inc CLI 初始化，按需勾选 Next.js 相关技能包

项目地址在这里：https://github.com/agents-inc/skills/tree/main/dist/plugins/web-meta-framework-nextjs/skills/web-meta-framework-nextjs

最后说句真心话：Skill 本身不能替代你真的去读一遍 Next.js 文档，但它能帮你少走很多「Claude 过度客户端化」的弯路。Framework 在快速迭代，给 AI 助手也装个雷达，挺值的。

GitHub: https://github.com/agents-inc/skills/tree/main/dist/plugins/web-meta-framework-nextjs/skills/web-meta-framework-nextjs