What is 'use client' in Next.js?

#react #state #frontend #nextjs

Next.js App Router defaults all components to Server Components.

The "use client" directive marks a file as a Client Component.

1) What does it do?

Placed at the top of a file: "use client";
Tells Next.js: render this component on the client (browser).
Without it → the file stays a Server Component.

// Button.tsx
"use client";

export default function Button() {
  return <button onClick={() => alert("Clicked!")}>Click me</button>
}

Without "use client", this would break: event handlers & useState only work in the browser.

2) Why is it needed?

Next.js defaults to Server Components for speed & smaller bundles.
"use client" is an escape hatch when you need client-only features.

3) When to use it?

You need "use client" if you use:

React hooks: useState, useEffect, useRef
Event handlers: onClick, onChange, …
Browser APIs: localStorage, window, document
Client-only libraries: Chart.js, React-Quill, etc.

4) How does it work internally?

Next.js scans for "use client" at build time.
That file + its imports → shipped as JS bundle to the browser.
Server Components are stripped to HTML + serialized props.

5) Mixing Server & Client Components

Server Components can import Client Components.
Client Components cannot import Server Components.

// page.tsx (Server Component)
import Button from "./Button";

export default function Page() {
  return (
    <div>
      <h1>Hello</h1>
      <Button />  // Client-side, interactive
    </div>
  );
}

6) Mental Model 🧠

Default = Server Component (fast, no client JS).
Add "use client" only where you need state, events, or browser APIs.
Sprinkle sparingly → keep most of your tree on the server.

⚡ "use client" is the switch that brings React interactivity into your Next.js App Router components.

Originally published on: Bitlyst

DEV Community