Per què no es defineix Window a NextJS?

Bloc

Per què no es defineix Window a NextJS?

Avui m’agradaria parlar de l’error més freqüent amb què es troben els programadors NextJS: window is not defined. Si heu treballat amb NextJS durant un dia o durant un any, és probable que hàgiu vist aquest error. Pot semblar una ximpleria, però he vist programadors experimentats confosos per aquest error.



Si escriviu un codi així a la vostra aplicació NextJS, fallarà amb l'error window is not defined.

const width = window.innerWidth;

Però, per què la finestra no està definida?

NextJS és un framework que us permet crear aplicacions de renderització estàtiques i de servidor. Utilitza NodeJS per representar la vostra aplicació i window no està definit a NodeJS. Això vol dir que hem de tenir cura que el nostre codi que accedeixi al window l'objecte no s'executa a NodeJS.



Per sort per a nosaltres, hi ha tres solucions fàcils d’utilitzar window a les nostres aplicacions NextJS.

1. Utilitzeu el ganxo useEffect

Amb aquest enfocament, només accedim al window objecte quan estem dins d'un useEffect ganxo. Això garanteix que el nostre codi només s’executi al costat del client. L'exemple següent mostra un component d'imatge que té la mateixa amplada que la finestra gràfica. Per fer-ho, fem servir una combinació de useState i useEffect per obtenir i emmagatzemar amb seguretat el window.innerWidth.



import React from 'react'; const Image = (props) => { const [width, setWidth] = React.useState(0); React.useEffect(() => { setWidth(window.innerWidth); }); return ; };

# front-end-development #programming #nextjs #react #javascript

medium.com

Per què no es defineix Window a NextJS?

Com es resol l’error NextJS més comú. Avui m’agradaria parlar de l’error més comú amb què es troben els programadors de NextJS: la finestra no està definida. Si heu treballat amb NextJS durant un dia o durant un any, és probable que hàgiu vist aquest error. Pot semblar una ximpleria, però he vist programadors experimentats confosos per aquest error.