Error fixes / Next.js
Next.js
Next.js: client hook inside a Server Component
A server file called useState, useEffect, or another client hook.
The error
You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
What it means
App Router files are Server Components unless they start with use client. The Next.js docs state the error plainly: you are using a React client hook in a Server Component. Agents add useState to a page.tsx that also reads the database, and the build stops. The fix is to mark the small interactive component as a client component, not to mark the whole layout.
Fix
- Read which hook and which file the compiler names.
- Move the interactive piece into its own file. Put use client at the top of that file, before imports.
- Keep data fetching in the server file and pass plain props into the client component.
- Do not add use client to the root layout unless the whole tree really has to be client-side. You will lose server rendering for everything under it.
- Build again. The production build is the check that matters.
Prompt
Fix prompt
The Next.js build says a component needs useState (or another client hook) but no parent is marked with "use client". Split the interactive component into its own file and add "use client" at the top of that file only. Keep database and secret reads in a Server Component and pass serialisable props down. Do not put "use client" on the root layout. Run the production build and tell me which file became a Client Component.
Questions
What does use client actually do?
It marks that module and the components it defines as Client Components, so hooks and browser events work. It is not a security boundary. Secrets still must not be imported there.
Can I fetch data inside the client component instead?
You can, but then you need a public API and you lose the simple server fetch. Prefer fetching on the server and passing props, unless the data truly depends on a click.
Why did next dev work?
The dev server can show the error as an overlay while you keep clicking around. The Vercel build treats it as a failed deployment. Run next build locally.