Claude Code react-nextjs-development for page data and interaction
Use existing App Router and component conventions to split data reading and client interactions, covering loading, empty, error, and narrow layouts.
中文Install in Claude Code
Open the React, Next.js, TypeScript, or Tailwind project in Claude Code with its reusable components. Check actual route conventions for the server boundary.
- Review `.claude/skills/react-nextjs-development/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/react-nextjs-development/` in your project and save the reviewed file as `.claude/skills/react-nextjs-development/SKILL.md`.
- Start Claude Code from that project's root, then select `/react-nextjs-development` in the slash menu.
Example task
Page next-31 is a reading event directory. An empty server result shows “No events yet”. The dropdown keeps its selection on the client.What to check
Record {queryOwner: 'server', filters: 'client', emptyText: 'No events yet'} in the page design. Reuse the empty-list pattern and test errors and narrow screens.
Original SKILL.md on GitHub · Updated
Frequently asked question
When should a component run on the client?
Use it for input, local interaction state, and browser events. Start with the server boundary for App Router data reading.