在我的Next.js应用程序中，我似乎无法访问窗口:
未处理的拒绝(ReferenceError):没有定义窗口
componentWillMount() {
console.log('window.innerHeight', window.innerHeight);
}
当前回答
我必须从URL访问哈希，所以我想到了这个
const hash = global.window && window.location.hash;
其他回答
有史以来最好的解决方案 从'next/dynamic'导入dynamic; const Chart = dynamic(()=> import('react-apexcharts')， { ssr:假的, })
将代码从componentWillMount()移动到componentDidMount():
componentDidMount() {
console.log('window.innerHeight', window.innerHeight);
}
在Next.js中，componentDidMount()只在提供窗口和其他浏览器特定api的客户端上执行。来自Next.js wiki:
js是通用的，这意味着它首先在服务器端执行代码， 然后客户端。窗口对象只在客户端显示，因此if 你绝对需要在一些React组件中访问它 应该把该代码放在componentDidMount中。这个生命周期方法 只能在客户端执行。你可能还想检查一下是否有 是不是有其他的通用库可以满足你的需要。
同样，componentWillMount()将在React的v17中被弃用，因此在不久的将来使用它实际上可能是不安全的。
当我在next.js中开发web应用程序时，我也面临着同样的问题，这解决了我的问题，你必须在生命周期方法或react Hook中引用引用窗口对象。例如，假设我想用redux创建一个存储变量，在这个存储中我想使用一个windows对象，我可以这样做:
let store
useEffect(()=>{
store = createStore(rootReducers, window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__())
}, [])
....
所以基本上，当你使用window的对象时，总是使用钩子来玩或者componentDidMount()生命周期方法
日期:06/08/2021
检查窗口对象是否存在，然后跟随代码进行操作。
function getSelectedAddress() {
if (typeof window === 'undefined') return;
// Some other logic
}
对于那些不能使用hook的人(例如，函数组件):
使用setTimeout(() => yourFunctionWithWindow());将允许它获得窗口实例。我想只是还需要一点时间来加载。
