Split Next.js server and client components with Claude Code

Use server-components to place data loading and browser-side state in the right App Router components.

Install in Claude Code

Claude Code and a local Next.js App Router project with sample data.

Open the pinned GitHub source below and retrieve the `plugins/nextjs-expert/skills/server-components/` directory from that revision.
Copy it into `.claude/skills/server-components/` in your project, keeping `SKILL.md` and its companion files together.
Open Claude Code in the project root and enter `/server-components` followed by the example task.

Example task

Create app/books/page.tsx with two sample books and a reading-list toggle on each row. Ask Claude to define the component boundary and pass only the book ID to the button.

What to check

The page remains a Server Component. The button declares use client and toggles local state, receiving a string ID from the server.

Original SKILL.md on GitHub · Updated 2026-11-11

Frequently asked question

Where should use client go for an interactive control?

Declare it at the client component boundary that needs state or event handlers. The server page can render it and pass serializable props.