Next.js: a client hook was used in a Server Component

What it means in plain English

The page is a Server Component, and the file calls a React hook that only runs in the browser, such as useState or useEffect. Next.js stops the build and says you are using a React client hook in a Server Component.

Likely causes

• The AI added a click handler or a piece of state to a file that had no 'use client' line.
• A shared component used a hook, and a server page imported it.
• The directive was added under the imports, so Next.js did not treat the file as a client file.

How to fix it, step by step

1. Open the file named in the error. Next.js says to mark the component that uses the hook as a Client Component.
2. Put 'use client' on the first line, above the imports. Next.js's before-and-after example is an useEffect component that starts working after that line is added.
3. Leave data loading in a Server Component when you can. Pass the loaded values into the client file as props. Do not mark the whole app as a client just to silence one hook.
4. Redeploy.

How to check it worked

• next build finishes without the client-hook message.
• The button or effect still runs in the browser.

Sources

• https://nextjs.org/docs/messages/react-client-hook-in-server-component (opens in a new tab)