Förklaring

Server-komponenter körs på servern och kan inte skicka funktioner som props till klientkomponenter. Funktioner kan inte serialiseras och skickas över nätverket. Det här felet visas när en server-komponent försöker skicka en event-handler, som onClick eller onChange, till en klientkomponent.

I Next.js App Router är interaktivitet alltid klientens ansvar. En server-komponent kan rendera en klientkomponent och skicka statiska data som props, men logik och event-hantering måste leva i klientkomponenten.

Felet är vanligt när man strukturerar om kod från Pages Router eller när man delar en komponent till server- och klientdelar.

Vanliga orsaker

En server-komponent skickar onClick, onChange, eller annan event-handler som prop. En server-komponent skickar en callback-funktion som prop.

Lösning

Flytta event-logiken innanför klientkomponenten själv:

// Fel: server-komponent skickar handler
// app/page.js (server-komponent)
export default function Page() {
  return <Button onClick={() => console.log('klick')} />;
}

// Rätt: logiken bor i klientkomponenten
// components/Button.js
'use client';
export default function Button({ label }) {
  return <button onClick={() => console.log('klick')}>{label}</button>;
}