Окно не определено в приложении NextJS React?

Question

В моем NextJS приложении, к которому я не могу получить доступ window

Необработанный отказ (ReferenceError): окно не определено

componentWillMount() {
    console.log('window.innerHeight', window.innerHeight);
}

Answer 1

Переместите код с componentWillMount() на componentDidMount():

componentDidMount() {
  console.log('window.innerHeight', window.innerHeight);
}

В NextJS componentDidMount() выполняется только на клиенте, где будут доступны window и другие специфичные для браузера API. Из NextJS вики :

Next.js является универсальным, что означает, что он выполняет код сначала на стороне сервера, затем на стороне клиента. Объект окна присутствует только на стороне клиента, поэтому, если вам абсолютно необходим доступ к нему в каком-либо компоненте React должен поместить этот код в componentDidMount. Этот метод жизненного цикла будет быть выполненным только на клиенте. Вы также можете проверить, есть ли не какая-нибудь альтернативная универсальная библиотека, которая может удовлетворить ваши потребности.

В том же ключе componentWillMount() будет устаревшим в v17 из React, так что его будет потенциально небезопасно использовать в самом ближайшем будущем.

Answer 2

componentWillMount() ловушка жизненного цикла работает как на стороне сервера, так и на стороне клиента.В вашем случае сервер не будет знать об «окне» или «документе» во время показа страницы, рекомендуется переместить код в

Решение 1:

componentDidMount()</code>.

Или, Решение 2

Если вы хотите выполнить только то, что хотите, вы можете написать что-то вроде:

componentWillMount() {
    if (typeof window !== 'undefined') {
        console.log('window.innerHeight', window.innerHeight);
    }
}

Answer 3

Другое решение - использовать process.browser, чтобы просто выполнить команду во время рендеринга только на стороне клиента.

if (process.browser) {
  // client-side-only code
}