Skip to main content

What does the "use client" directive do?

Next.jsMiddle~1 min read
Suggest an edit

The "use client" directive tells Next.js that this file and all its contents must run in the browser, not on the server.

Put simply: it turns the component into a client component.

Where and how it's used

tsx
'use client' export default function Button() { return <button>Click</button> }

Important:

  • "use client" must be the first line of the file
  • it applies to the entire file

What "use client" actually does

1. Switches the component into client mode

After "use client", the component:

  • renders and hydrates in the browser
  • ends up in the client JavaScript bundle

Without this directive, a component is considered a server component by default.

2. Enables interactivity

With "use client", the following become available:

  • useState
  • useEffect
  • useContext
  • event handlers (onClick, onChange)
  • working with window, document, localStorage

Without the directive, all of this throws an error.

3. Defines the Server ↔ Client boundary

"use client":

  • creates a boundary between the server and the browser
  • everything imported into this file is also considered client-side
tsx
// Button.tsx 'use client' import Icon from './Icon' // Icon is also client-side

This matters for understanding the architecture.

4. Affects the size of the client JavaScript

Every file with "use client":

  • increases the JS sent to the browser
  • requires hydration

That's why the directive is used selectively, not "just in case".

What "use client" does NOT do

  • it doesn't automatically make the component faster
  • it doesn't disable server-side HTML rendering
  • it doesn't allow working with a DB or secrets
  • it doesn't affect other files without an import

A common mistake

Marking the entire page as client-side:

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

The better approach:

  • keep the page as a server component
  • move the interactive parts into separate client components

In short

"use client" marks the file as a client component, enables interactivity, and defines that the code will run in the browser and end up in the client JavaScript.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit