javascript - Window is not defined in Next.js React app

Question

In my Next.js app I can't seem to access window:

Unhandled Rejection (ReferenceError): window is not defined

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

Answer 1

Another solution is by using p?r?o?c?e?s?s?.?b?r?o?w?s?e?r to just execute your command during rendering on the client side only.

But process object has been deprecated in Webpack5 and also NextJS, because it is a NodeJS variable for backend side only.

So we have to use back window object from the browser.

if (typeof window !== "undefined") {
  // Client-side-only code
}