Claude Code 写 Next.js 还在用过时 API？这个 Skill 让它自动对齐 2026 最佳实践

如果你经常用 Claude Code 写 Next.js，却总被它生成的老旧代码坑——比如还在 pages/ 目录、getServerSideProps 满天飞，或者 Tailwind 配置写法已经换了一代——那你应该看看这个 Skill。

它是什么？

nextjs-codegen 是一个专门教 Claude Code 写“现代版” Next.js 的 Skill。它把 Next.js 16、React 19、Tailwind CSS v4、shadcn/ui v4、TanStack Query v5、Zustand v5、React Hook Form + Zod v4 这些最新版本的最佳实践，打包成一份 Claude 能直接读懂的 SKILL.md。

换句话说，你不用再每次 prompt 里写一大段“请用 App Router、Server Components、proxy.ts”，装上这个 Skill，Claude 自动按最新规范出代码。

为什么值得用？

Next.js 生态迭代太快了。2025 年的教程放到 2026 年，可能已经过时一半。这个 Skill 的作者把版本映射关系整理得非常清楚：

• Next.js 16：Turbopack 默认、proxy.ts 替代 middleware.ts、"use cache" 指令
• React 19：useActionState、View Transitions、<Activity/>
• Tailwind CSS v4：CSS-first 配置、OKLCH 颜色
• Zustand v5：原生 useSyncExternalStore，不再需要 ES5 兼容

这种“版本即文档”的思路，对框架类 Skill 来说非常实用。Claude 不会因为训练数据 cutoff 而写出过时代码。

适用场景

• 用 Claude Code 新建 Next.js 项目
• 把旧页面迁移到 App Router
• 写 Server Actions、表单验证、数据获取
• 团队统一代码规范，避免“每个人写的 Next.js 都不一样”

一点提醒

这个 Skill 来自 Scheune10-coding/my-claude-code-skills 仓库，该作者还有 fastapi-codegen、clone-website、terraform-infra 等一整套生产级 Skill。如果你既写前端又写后端，整个仓库都值得 star。

GitHub 地址：https://github.com/Scheune10-coding/my-claude-code-skills/tree/main/nextjs-codegen

如果你也厌倦了 Claude 输出“考古级”代码，这个 Skill 值得放进你的 .claude/skills/ 目录。

GitHub: https://github.com/Scheune10-coding/my-claude-code-skills/tree/main/nextjs-codegen