You're importing a component that needs useEffect. This React hook only works in a client component. To fix, mark the file (or its parent) with the 'use client' directive.

You're importing a component that needs useEffect. This React hook only works in a client component. To fix, mark the file (or its parent) with the 'use client' directive.

En server-komponent importerar en komponent som använder `useEffect`, vilket kräver `'use client'`.

Förklaring

Samma grundproblem som med useState: useEffect är en klient-hook som enbart körs i webbläsaren. Server-komponenter körs bara på servern och har inget lifecycle-system. Konceptet med sidoeffekter efter rendering passar inte server-rendering.

I App Router är useEffect alltid ett tecken på att du behöver en klientkomponent. Frågan att ställa sig är om hela komponenten behöver vara klientrenderad, eller om bara en liten del av logiken kan brytas ut till en separat 'use client'-komponent.

Vanliga orsaker

Saknad 'use client'-deklaration i en fil med useEffect. Vanligast vid migrering från Pages Router eller traditionella React-appar.

Lösning

Lägg till 'use client' i filen, eller extrahera useEffect-logiken till en separat komponent:

'use client';

import { useEffect } from 'react';

export default function AnalyticsTracker({ pageId }) {
  useEffect(() => {
    trackPageView(pageId);
  }, [pageId]);
  return null;
}

Server-komponenten kan sedan importera <AnalyticsTracker /> och injicera den på rätt ställe utan att hela sidan behöver renderas på klienten.