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.

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 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>;
}

Related resources

• Next.js cheat sheet
• Next.js complete guide
• React complete guide