What is the "use client" directive in Next.js?

The "use client" directive is a string literal placed at the top of a file that marks all components in that module (and everything it imports) as Client Components. Without this directive, components in the App Router are Server Components by default. Usage: "use client"; import { useState } from "react"; export function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(c => c + 1)}>{count}</button>; }. When to use "use client": when the component uses: useState, useEffect, useReducer, or any other hooks; event handlers (onClick, onChange, onSubmit); browser-only APIs (window, localStorage, navigator); third-party libraries that depend on browser APIs; context that uses client state. Important nuances: (1) "use client" marks a boundary in the component tree — it and all its imports become client components; (2) It doesn't mean the component is NOT server-rendered — Client Components are still pre-rendered on the server (SSR) but also have JavaScript shipped to the client for hydration and interactivity; (3) Keep "use client" components as leaf nodes when possible — push them down the tree so more of the tree can remain Server Components. vs Server Components: Server Components = server only, no JS bundle; Client Components = server pre-rendered + client hydrated, JS bundle included. Use Server Components by default; add "use client" only when you need interactivity.