Client Components & "use client"

Add `'use client'` at the top of a file to make it (and the components it imports) run in the browser, where hooks and event handlers are available.

4 min read Level 2/5 #nextjs#client-components

What you'll learn

Add the `'use client'` directive
Use `useState`, `useEffect`, and event handlers
Keep the client boundary as low in the tree as possible

Server Components are great for static and data-heavy UI, but anything interactive — a button, a form input, a hover menu — needs to run in the browser. That is what Client Components are for.

The “use client” Directive

Put 'use client' at the very top of the file, above all imports. The file (and any component it defines) now runs on the client.

'use client'

import { useState } from 'react'

export default function Counter() {
  const [n, setN] = useState(0)
  return (
    <button onClick={() => setN(n + 1)}>Clicked {n} times</button>
  )
}

The component still renders once on the server for the initial HTML, then hydrates in the browser to wire up the interactivity.

The Boundary Is the File

Once a file is marked 'use client', every component it imports is bundled for the client too. That means the directive defines a boundary in your import graph.

// app/page.tsx (server)
import Counter from './Counter' // Counter is a client component
export default function Page() {
  return (
    <main>
      <h1>Welcome</h1>
      <Counter />
    </main>
  )
}

Page stays on the server. Counter ships to the browser.

Keep the Boundary Small

A common mistake is marking the root layout as a client component. That ships your whole tree to the browser. Push 'use client' down to the smallest interactive leaf instead.

Data Fetching in Server Components →