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

You’re using client-side hooks (useState, useEffect, etc.) in a Server Component.

Why this happens

In the Next.js App Router, all components are Server Components by default. Server Components run only on the server and can’t use browser APIs or React hooks that require client-side state. When you import useState, useEffect, or event handlers without marking the file as a Client Component, Next.js throws this error.

Fix 1: Add ‘use client’ directive

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Fix 2: Split into server and client parts

// ServerPage.tsx (Server Component — no directive needed)
import Counter from './Counter';

export default async function Page() {
  const data = await fetchData(); // Server-side
  return <Counter initialCount={data.count} />;
}

// Counter.tsx (Client Component)
'use client';
export default function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Alternative solutions

Push 'use client' as far down the tree as possible — only the leaf components that need interactivity should be client components. This keeps most of your app server-rendered.

Use server actions for form handling instead of useState + onSubmit:

// No 'use client' needed
export default function Page() {
  async function handleSubmit(formData: FormData) {
    'use server';
    await saveData(formData);
  }
  return <form action={handleSubmit}><button type="submit">Save</button></form>;
}

Prevention

• Plan your component tree upfront: identify which parts need interactivity (client) vs. static (server).
• Never add 'use client' to layout or page files — prefer extracting interactive parts into child components.

Related: Next.js: Dynamic Server Usage fix · Next.js: getServerSideProps Error fix