Suggest an editImprove this articleRefine the answer for “What does the "use client" directive do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The `"use client"` directive tells Next.js that **this file and all its contents must run in the browser**, not on the server. **Key point:** it turns the component into a client component.Shown above the full answer for quick recall.Answer (EN)ImageThe `"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.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.