Claude Code react-nextjs-development：拆分页面读数与客户端交互
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/react-nextjs-development/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/react-nextjs-development/`，把核对后的文件保存为 `.claude/skills/react-nextjs-development/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/react-nextjs-development`。
中文摘要
按现有 App Router 和组件约定为 Next.js 页面分配职责，补齐等待、空数据、错误和手机布局。
SKILL.md 中文导读
可复现示例
页面 next-31 是读书活动目录。服务端数据为空时，界面只需给出“No events yet”，筛选下拉的当前选项保留在客户端。工作步骤
- 查阅已有路由、获取数据方式和组件，明确页面需要的状态。
- 分别核对服务端读数和客户端交互，并覆盖错误、空结果及窄屏。
验收方法
在页面方案中记录 {queryOwner: 'server', filters: 'client', emptyText: 'No events yet'}。用已有组件呈现空列表，并覆盖错误和窄屏。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中提供已有使用 React、Next.js、TypeScript 或 Tailwind 的项目及可复用组件。服务端边界按实际路由架构核对。
常见问题
什么时候把组件设为客户端运行？
需要管理用户输入、局部交互状态或浏览器事件的部分适合放在客户端。App Router 的数据读取优先放到服务端边界。