← All errors

useState only works in a Client Component (Next.js App Router)

You're importing a component that needs useState. This React hook only works in a client component. To fix, mark the file (or its parent) with the "use client" directive.

In one sentence: In the Next.js App Router, components are server-only by default, and hooks like useState need the file to be marked "use client".

What it means

In the App Router (the `app/` folder), every component is a Server Component unless you say otherwise. Server Components render once on the server and can't hold state, run effects, or handle clicks.

Hooks such as `useState`, `useEffect`, `useRouter` from `next/navigation`, and event handlers like `onClick` only work in Client Components. Adding `"use client"` at the very top of the file opts it in.

Common causes

• The AI tool wrote a component with `useState` or `onClick` but didn't add `"use client"`.
• `"use client"` is there but not on the first line (it must come before any imports).
• A Server Component page imports an interactive component from a file that isn't marked as client.
• The same error also appears for `useEffect`, `useContext`, and `createContext`.

How to fix it

1. Add `"use client";` as the very first line of the file that uses the hook.
2. Keep pages as Server Components where you can, and split the interactive part into its own small client file (for example `LikeButton.tsx`) that the page imports.
3. Don't add `"use client"` to a component that needs server-only things like secret API keys or direct database calls. Fetch that data in the server page and pass it down as props.

import { useState } from "react";
export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

"use client";
import { useState } from "react";
export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Prompt to paste into your AI tool

Next.js says a hook only works in a Client Component. Add "use client" as the first line of only the components that use hooks or event handlers, keep data fetching and secrets in server components, and pass data down as props.

Related errors

• TypeError: Cannot read properties of undefined
• CORS error: blocked by CORS policy
• Hydration failed: server HTML didn't match the client (Next.js)
• Module not found: Can't resolve '...'