Next.js 16+ · Directive

use client

'use client' marks a module as a client entry point in the App Router. Use it for interactive UI that needs state, event handlers, or browser APIs, while keeping boundary props serializable.

How it works

Place 'use client' as the first statement in a module, before imports, to make its exports entry points for the client side. The boundary applies to the whole module: imported code and rendered descendants join the client graph, while values passed from server components must be serializable.

Syntax

'use client'

Key points

Use it on a module that begins a client-rendered subtree.
Choose it for UI needing state management, event handling, or browser APIs.
Write the directive before every import in the entry module.
It marks where the server component graph hands off to the client graph.
Exports from the marked module are the components that server components can introduce into the client graph.

Common mistakes

Do not add the directive to every client component; one entry point can cover the client subtree.
The directive is file-wide and must not be moved inside a component or function.
Props crossing from a server component into a client component must use serializable values; ordinary function props are not valid.

Example: Interactive client component

// app/ui/counter.tsx
'use client'

import { useState } from 'react'

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

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

This client entry point enables state and event handling for the counter.

When to use it

Interactive controls

A component uses useState or useReducer for local interactive state.

Event-driven UI

A component registers click, input, or submit handlers.

Browser APIs

A component reads browser-only APIs such as window or navigator.

Client island

A server-rendered page embeds a focused interactive widget.

Interview questions

QWhat does 'use client' do?

It declares a client entry point for components that need client-side JavaScript, such as state, event handlers, or browser APIs. It also establishes the server/client boundary for that module.

Follow-up: What does the boundary include? The module's imports and directly rendered client subtree become part of the client module graph, so place it narrowly to control browser JavaScript.

QWhere must the directive appear?

It must be the first statement in the file, before imports. The directive applies to the entire module rather than to one component or function.

Follow-up: Can it be placed inside a component? No; the page documents that inline placement is invalid, so use a separate module boundary instead.

QWhat constraint applies to client component props?

Props passed across the boundary must be serializable so React can send them from the server to the client. State and event handlers can live in the client component itself.

Follow-up: Can a server component pass an event-handler function directly? No, ordinary functions cannot cross this boundary; pass serializable data and handle interaction on the client.

Server Components
Client Components
server and client boundary
serializable props
use server

Source: Directives: use client - Next.js. Checked 2026-10-15.