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

̶A̶n̶o̶t̶h̶e̶r̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶ ̶i̶s̶ ̶b̶yy̶ ̶u̶s̶s̶ ̶i̶n̶g̶ ̶ ̶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̶n̶ ̶ ̶o̶n̶ ̶t̶h̶e̶ ̶c̶l̶i̶e̶n̶t̶ ̶s̶i̶d̶e̶ ̶o̶n̶l̶y̶.p̶r̶o̶c̶e̶s̶s̶.̶b̶r̶o̶w̶s̶e̶r

但是对象在Webpack5和NextJS中已被弃用，因为它只是后端的NodeJS变量。process

因此，我们必须使用来自浏览器的 back 对象。window

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

另一种解决方案是使用react hook来替换：componentDidMount

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

将代码从移动到 componentDidMount（）：componentWillMount()

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

在 Next.js 仅在客户端上执行，其中和其他浏览器特定的 API 将可用。来自 Next.js wiki：componentDidMount()window

接下来.js是通用的，这意味着它首先在服务器端执行代码，然后在客户端执行代码。窗口对象仅存在于客户端，因此，如果您绝对需要在某个 React 组件中访问它，则应将该代码放在 componentDidMount 中。此生命周期方法将仅在客户端上执行。您可能还想检查是否有一些可能适合您需求的替代通用库。

同样，在 React 的 v17 中将被弃用，因此在不久的将来有效地使用它可能是不安全的。componentWillMount()