nextjs window is not defined

千击万磨还坚劲，任尔东西南北风

于 2024-11-26 20:58:39 发布

阅读量797

点赞数 8

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/qq_73917015/article/details/144067983

版权

问题产生的原因

在 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)
  },[])