# Client Components — Next.js

Source: https://www.skillbyai.com/en/nextjs/k-client

> Opt in with "use client".

## Interactivity in the browser

Add `"use client"` at the top of a file to make its components **Client Components**. They can use state, effects, event handlers and browser APIs. They are still **prerendered to HTML** on the server for the first load, then **hydrated** in the browser to become interactive. Keep client components small and push them to the leaves of the tree (a button, a form, a chart), so most of the page stays server-rendered and the JavaScript bundle stays small.

## A Client Component

This file is from a small demo store I built with Next.js 16.3.8, React 19.3 and TypeScript; `next build` compiled and type-checked it successfully. The "use client" directive marks this file as client code; it uses useState and an onClick handler.

```tsx
"use client";

import { useState } from "react";

export default function Counter({ start }: { start: number }) {
  const [count, setCount] = useState(start);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
```

## The Client Component in the server HTML, run

I built the demo store with `next build` (Next.js 16.3.8), started it with `next start` and requested pages with curl; the output is copied from that run, trimmed to the relevant lines. Even though Counter is a Client Component, the server-rendered HTML already contains "Count: 5"; the browser then hydrates it to handle clicks.

```bash
curl -s http://localhost:3917/counter
```

Output:

```
<title>Counter | Stationery Shop</title>
<button>Count: 5</button>
```

**Quiz:** Are Client Components rendered on the server for the first page load?

- [ ] Only in development
- [ ] No, never
- [x] Yes, they are prerendered to HTML and then hydrated in the browser
- [ ] Only if they have no state

*Answer:* Yes, they are prerendered to HTML and then hydrated in the browser. "use client" means "also runs in the browser", not "only in the browser".