# Next.js Server Components

> RSC usage, "use client" directive, and Component Purity.

- Skill: `fierzone/next-js-server-components` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fierzone/next-js-server-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fierzone/next-js-server-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fierzone (https://skillmd.com/u/fierzone)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fierzone/next-js-server-components

---


# Server & Client Components

## **Priority: P0 (CRITICAL)**

Next.js (App Router) uses React Server Components (RSC) by default.

## Server Components (Default)

- **Behavior**: Rendered on server, sent as HTML/Payload to client. Zero bundle size for included libs.
- **Capabilities**: Async/Await, Direct DB access, Secrets usage.
- **Restrictions**: No `useState`, `useEffect`, or Browser APIs (`window`, `localstorage`).

## Client Components

- **Directive**: Add `'use client'` at the VERY TOP of the file.
- **Usage**: Interactivity (`onClick`), State (`useState`), Lifecycle effects, Browser APIs.
- **Strategy**: Move Client Components to the leaves of the tree.
  - _Bad_: Making the root layout a Client Component.
  - _Good_: Wrapping a `<Button />` in a Client Component.

## Composition Patterns

- **Server-in-Client**: You cannot import a Server Component directly into a Client Component.
  - _Fix_: Pass Server Component as `children` prop to the Client Component.

```tsx
// ClientWrapper.tsx
'use client';
export default function ClientWrapper({ children }) {
  return <div>{children}</div>;
}

// Page.tsx (Server)
<ClientWrapper>
  <ServerComponent />
</ClientWrapper>;
```

## Anti-Patterns

- **Poisoning**: Importing server-only secrets into Client Components (Use `server-only` package to prevent).
- **Over-fetching**: Passing large data props to Client Components (Serialization cost). Only pass IDs if possible.