Suggest an edit

Improve this article

Refine the answer for “What are client components in Next.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Client Components** in Next.js are React components that **run in the user's browser** and handle **UI interactivity**.

In short:
anything that **reacts to a user's actions** is built with client components.

---

## Short definition (for an interview)

A **client component** is a component that:

- renders and runs **in the browser**
- supports state, effects, and event handlers
- is sent to the user as JavaScript
- is explicitly marked with the `'use client'` directive

---

## How to declare a client component

```tsx
'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}
```

The `'use client'` line is **required**
It must be the **first line of the file**.

---

## What client components CAN do

- `useState`, `useEffect`, `useReducer`, `useContext`
- event handlers (`onClick`, `onSubmit`, `onChange`)
- access `window`, `document`, `localStorage`
- work with browser APIs
- dynamically update the UI without a reload

---

## What client components CANNOT do (or aren't allowed to)

- work with a database directly
- use server secrets
- access the file system
- import server components

Why?
Because their code **is sent to the browser** and must be safe.

---

## When to use client components

Use a client component if at least one of these conditions applies:

- buttons, clicks, forms
- modal windows
- dropdowns, tabs, accordions
- state management
- animations
- `useEffect`

If there is no interactivity - **a client component is not needed**.

---

## Interaction with server components

### An important rule:

> **A client component cannot import a server component**

This is not allowed:

```tsx
'use client'
import ServerComponent from './ServerComponent'
```

This is allowed:

```tsx
// Server Component
import ClientComponent from './ClientComponent'
```

Why it's built this way:

- server code must not end up in the browser
- Next.js strictly enforces the server / client boundary

---

## A common beginner mistake

Making the entire UI a client component:

```tsx
'use client'
export default function Page() {
  return <BigStaticLayout />
}
```

The right approach:

- keep the page as a server component
- move the interactive pieces into client components

---

## Quick comparison (to reinforce)

| Client component | Server component |
|---|---|
| Runs in the browser | Runs on the server |
| Has interactivity | No interactivity |
| JS is sent | JS is not sent |
| Needs `'use client'` | Default |
| Uses hooks | Hooks not allowed |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts428 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.