Next.js React 应用程序中未定义窗口

In my Next.js我似乎无法访问该应用程序window:

未处理的拒绝（ReferenceError）：窗口未定义

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

̶A̶n̶o̶t̶h̶e̶r̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶ ̶i̶s̶ ̶b̶y̶ ̶u̶s̶i̶n̶g̶ ̶p̶r̶o̶c̶e̶s̶s̶.̶b̶r̶o̶w̶s̶e̶r̶ ̶t̶o̶ ̶j̶u̶s̶t̶ ̶e̶x̶e̶c̶u̶t̶e̶ ̶ ̶y̶o̶u̶r̶ ̶c̶o̶m̶m̶a̶n̶d̶ ̶d̶u̶r̶i̶n̶g̶ ̶r̶e ̶n̶d̶e̶r̶i̶n̶g̶̶o̶n̶̶t̶h̶e̶̶c̶l̶i̶e̶n̶t̶̶s̶i̶d̶e̶̶o̶n̶l̶y̶。

But processobject 在 Webpack5 和 NextJS 中已被弃用，因为它是仅用于后端的 NodeJS 变量。

所以我们必须使用 backwindow来自浏览器的对象。

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

其他解决方案是使用react hook来替换componentDidMount:

useEffect(() => {
    // Client-side-only code
})