Förklaring

Precis som window är document ett webbläsarobjekt som saknas i Node.js-miljön. Refererar en komponent till document under render-fasen, kraschar servern med det här felet.

document används ofta för direkta DOM-manipulationer: document.querySelector, document.getElementById, och document.cookie. Tredjepartsbibliotek som arbetar med DOM, till exempel tooltip-bibliotek, animationsramverk och analytics-SDK:er, anropar ofta document vid modulinitiering och kraschar vid import.

Markering med 'use client' räcker inte alltid. Next.js pre-renderar klientkomponenter på servern om de inte är dynamiskt importerade med ssr: false.

Vanliga orsaker

Direkt referens till document.querySelector, document.getElementById, eller liknande i render-fasen. Import av ett DOM-manipulationsbibliotek som anropar document när modulen laddas.

Lösning

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

useEffect(() => {
  const el = document.querySelector('.container');
  // ...
}, []);

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

import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('./RichTextEditor'), { ssr: false });