useState only works in a Client Component. Add the "use client" directive

  • Next.js

What it means

In the Next.js app router, components run on the server by default, and server components cannot use state, effects or event handlers. The component needs to be marked as a client component.

Why it happens

  • A component with useState, useEffect or onClick has no 'use client' line at the top.
  • A hook-using component is imported into a server file without its own 'use client'.

How to fix it

  1. Add 'use client' as the first line of the file that uses the hook.
  2. Keep it as low as possible: make the small interactive part a client component, not the whole page.
  3. Never put secrets or database calls in a 'use client' file: everything in it ships to the browser.

Let your AI find the cause

Paste this into Claude Code, Cursor, Lovable or whichever AI built your app. It looks first and changes nothing until you have read the answer.

My Next.js build fails because a component needs useState (or another hook) in a Server Component. Without changing anything yet, show me which file uses the hook, which server file imports it, and the smallest part that needs to become a client component.