server-components
Claude Code server-components 技能：拆分 Next.js 服务端和客户端组件
EnglishClaude Code 安装步骤
- 从下方 GitHub 原文打开固定提交，在同一提交中取得 `plugins/nextjs-expert/skills/server-components/` 技能目录。
- 将目录复制到项目内的 `.claude/skills/server-components/`，确认 `SKILL.md` 与附带文件位于该目录。
- 在项目根目录启动 Claude Code，输入 `/server-components` 加上示例中的任务说明。
中文摘要
按 Next.js App Router 的渲染方式划分数据读取和浏览器交互，帮助确定 use client 的位置和数据传递方式。
SKILL.md 中文导读
可复现示例
创建图书目录页面，app/books/page.tsx 返回两本固定图书，每本有可切换的“想读”按钮。让 Claude 拆分组件并只把图书 ID 传给按钮。工作步骤
- 找出读取数据和处理交互的代码。
- 为需要浏览器状态的部分定义客户端入口。
- 核对传递的数据和页面交互。
验收方法
目录页保留服务端组件，按钮文件声明 use client，点击切换按钮本身的状态，传递的 ID 为字符串。
GitHub 原文 · 更新日期
适用环境
Claude Code 与本地 Next.js App Router 项目。示例仅使用固定演示数据。
常见问题
整个页面都需要声明 use client 吗？
可以把状态和点击事件集中在交互组件中，由服务端页面渲染列表并向按钮传入可序列化的数据。