Förklaring

'use client' och 'use server' är direktiv som signalerar till bundlern var gränsen mellan server och klient går. För att de ska tolkas korrekt måste de vara det absolut första uttrycket i filen. Ingenting, inte ens imports, får komma före.

Ligger direktivet efter imports eller annan kod tolkas det som en vanlig strängdeklaration utan effekt. I vissa Next.js-versioner visas ett fel direkt, i andra ignoreras direktivet tyst, vilket kan leda till svårdiagnosticerade beteendeproblem.

Vanliga orsaker

'use client' placerat efter en eller flera import-satser. En kommentar framför direktivet kan i vissa versioner räknas som ett uttryck.

Lösning

Flytta 'use client' till absolut första raden:

'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/Button';

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