西安汽车网站制作百度浏览器手机版
问题产生的原因
在 Next.js 中，“window is not defined” 错误通常出现在服务器端渲染（Server - Side Rendering，SSR）的代码中。这是因为window对象是浏览器环境中的全局对象，在服务器端没有window这个概念。例如，当你在 Next.js 的getServerSideProps或其他在服务器端执行的函数中尝试访问window相关的代码时，就会出现这个错误。
主要还是服务器需要运行代码生成html自然可能会在服务器端调用浏览器环境的API
解决方案
- 使用条件判断
可以通过判断typeof window!== 'undefined’来确保代码只在浏览器环境中执行。例如：
export function setItem(key: string, value: object) {if (typeof window !== 'undefined') window.localStorage.setItem(key, JSON.stringify(value));
}
export function getItem(key: string) {const value = typeof window !== 'undefined' ? window.localStorage.getItem(key) || "{}" : "{}";return JSON.parse(value);
}
- 将代码移到
useEffect钩子中（在函数组件中）
如果是在函数组件中，并且是使用 React Hooks 的情况，可以将依赖于window的代码放在useEffect钩子内。useEffect中的代码会在组件挂载后在浏览器环境中执行。
useEffect(()=>{const article=getItem('article')setHtml(article?.content||'')setTitle(article?.title||'标题')setType(article?.type||1)},[])