Förklaring

localStorage och sessionStorage är Web Storage API:er som enbart finns i webbläsaren. Next.js kör server-rendering i Node.js, där dessa objekt saknas helt. Refererar en komponent till localStorage i render-fasen kastas det här felet.

Ett vanligt misstag är att läsa från localStorage för att initialisera ett state-värde direkt i useState-anropet. Det fungerar i en vanlig React-app utan server-rendering men kraschar i Next.js.

Vanliga orsaker

localStorage-anrop utanför useEffect. Initial useState(localStorage.getItem(...)). Tredjepartsbibliotek som läser localStorage vid import.

Lösning

Läs alltid från localStorage inuti useEffect:

const [theme, setTheme] = useState("light");

useEffect(() => {
  const saved = localStorage.getItem("theme");
  if (saved) setTheme(saved);
}, []);

Om du behöver värdet för initial rendering, acceptera att den första renderingen visar ett standardvärde och uppdateras när useEffect körs. Det kallas hydration-safe initialisering.