Förklaring

window är ett webbläsarobjekt som inte existerar i Node.js-miljön där Next.js renderar serverdelen av din app. Om en komponent refererar till window under render-fasen kraschar servern med det här felet.

Det spelar ingen roll om komponenten är markerad med 'use client' — det räcker inte alltid. Next.js pre-renderar även klientkomponenter på servern om de inte är dynamiskt importerade. Server-sidan körs alltid utan window.

Felet dyker ofta upp när kod importeras från ett tredjepartsbibliotek som inte är designat för server-side rendering.

Vanliga orsaker

Direkt referens till window, document, navigator, eller screen i render-fasen. Import av bibliotek som anropar window vid modulinitiering, till exempel chart-bibliotek och analytics-SDK:er.

Lösning

Flytta window-anrop till useEffect, som enbart körs i webbläsaren:

useEffect(() => {
  const width = window.innerWidth;
  setWidth(width);
}, []);

För tredjepartsbibliotek som kraschar vid import, använd dynamisk import med ssr: false:

import dynamic from "next/dynamic";
const Chart = dynamic(() => import("./Chart"), { ssr: false });