What does the `'use client'` directive do?

Deep dive

`'use client'` tells Next.js that this module is a **Client Component boundary**. The file and everything it imports (down the tree) becomes part of the client bundle, and the code executes in the browser.

That enables:

• React hooks like `useState`, `useEffect`, `useReducer`,
• event handlers (`onClick`, `onSubmit`),
• browser-only APIs (`window`, `localStorage`).

Important implications

• Client Components cannot import server-only modules (DB clients, `fs`, server secrets).
• A `'use client'` boundary can grow accidentally if you import “too much” into it, increasing JS shipped to users.

Practical guidance

• Keep `'use client'` components small and focused.
• Push data fetching up to Server Components and pass serializable props down.
• Use client-only state only when the UI truly needs it.

Common pitfalls

• Adding `'use client'` at a layout/root and turning large parts of the app into client-side JS.
• Importing heavy libraries into a client boundary.
• Reading `window` during render (do it in `useEffect` if needed).