jsschools

'use client'

Directive marking the boundary into the client bundle for interactivity.

Since Next 13 (App Router) Spec ↗

Syntax

'use client' (first line of the file)

Returns

directive — Opts the module (and its imports) into Client Components.

Examples

'use client'
import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

// Server Component imports the Client Component
import { Counter } from './counter'

export default function Page() {
  return (
    <section>
      <h1>Server-rendered</h1>
      <Counter />
    </section>
  )
}

Notes

Required for components using state, effects, event handlers, or browser APIs. It marks the boundary: the file and everything it imports become part of the client bundle. Components are Server Components by default — add `'use client'` only where interactivity is needed, and push it as deep in the tree as possible.

See also