Förklaring

I Next.js App Router är alla komponenter server-komponenter som standard. React-hooks som useState, useEffect, och useRef fungerar enbart i klientkomponenter. Använder du dem i en server-komponent, eller importerar en komponent som gör det, visas det här felet.

Felet är tydligare än det ser ut: Next.js berättar exakt vilken hook som orsakar problemet och vad du behöver göra. Lägg till 'use client' längst upp i den fil som innehåller hooken eller importerar komponenten.

'use client' skapar en gräns: allt nedan i komponentträdet renderas på klienten, allt ovanför fortsätter vara server-renderat.

Vanliga orsaker

Saknad 'use client'-deklaration i en fil som använder React-hooks. Importering av ett tredjepartsbibliotek som internt använder hooks utan att biblioteket deklarerar 'use client'.

Lösning

Lägg till 'use client' som första rad i filen som behöver hooks:

'use client';

import { useState } from 'react';

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

Om problemet är ett tredjepartsbibliotek, skapa en wrapper-komponent med 'use client' som importerar biblioteket och återexporterar komponenten.