← All errors · Next.jsNext.js App Router & config errors

You're importing a component that needs useState. It only works in a Client Component

Exact 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

In the App Router every component is a Server Component unless marked otherwise. Hooks like useState, useEffect and event handlers only work in Client Components.

Likely causes

• Using React hooks in a file under app/ without the "use client" directive.
• Passing onClick or other handlers from a Server Component.

How to fix it

1. Add the directive as the very first line of the file that uses hooks:

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

2. Keep "use client" as low in the tree as possible: extract the interactive part into its own small component and import it from the Server Component page.

Prevent this next time

• Run `next build` (not just `next dev`) before every deploy; several of these errors only appear in production builds.
• Keep a checked-in `.env.example` listing every required variable.

Related errors

• async/await is not yet supported in Client Components
• Hydration failed because the initial UI does not match what was rendered on the server