What is 'use client' in Next.js?

Next.js App Router defaults all components to Server Components.
The "use client" directive marks a file as a Client Component.

use client

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.