Wie behebe ich den Fehler „Fenster ist nicht definiert' in Next.js?

Fenster ist in Next.js React App nicht definiert: Eine umfassende Lösung

In Next.js-Anwendungen kann der Fehler „ „Fenster ist nicht definiert“ beim Versuch, auf das globale „Fenster“-Objekt zuzugreifen. Dies kann auftreten, weil das Fensterobjekt nur während des clientseitigen Renderns verfügbar ist. So können Sie dieses Problem lösen:

Um das „window“-Objekt zu verwenden, können Sie Ihren Code mit einer „if“-Anweisung umgeben, die prüft, ob „window“ definiert ist:

if (typeof window !== "undefined") {
  // Client-side-only code
  console.log('window.innerHeight', window.innerHeight);
}

Dieser Ansatz stellt sicher, dass der Code innerhalb des „if“-Blocks nur auf der Clientseite ausgeführt wird, wo auf das „window“-Objekt zugegriffen werden kann.

Verwendung des Vorschlags von Der Zugriff auf „window“ über „process.browser“ wird nicht mehr empfohlen, da er sowohl in Webpack5 als auch in Next.js veraltet ist. Das „Prozess“-Objekt wird hauptsächlich für serverseitiges Rendern verwendet und seine Verwendung für clientseitige Vorgänge ist nicht geeignet.

Daher besteht die empfohlene Lösung darin, vorher zu prüfen, ob das „Fenster“-Objekt vorhanden ist darauf zugreifen. Dadurch wird sichergestellt, dass Ihr Code zwischen clientseitigen und serverseitigen Rendering-Umgebungen portierbar ist.

Das obige ist der detaillierte Inhalt vonWie behebe ich den Fehler „Fenster ist nicht definiert' in Next.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!