NextJS页面加载时出现localStorage is not defined错误求助

问题根源 #

1. 第一个useEffect的依赖数组中包含localStorage，在服务端渲染环境下该变量不存在，渲染时求值依赖项会直接触发错误，判断逻辑还未执行就报错。
2. 直接访问localStorage而非window.localStorage，判断逻辑不够严谨。

修正方案 #

• 移除第一个useEffect依赖数组中的localStorage，改为空数组，确保仅在组件挂载时执行一次读取操作。
• 所有localStorage访问改为window.localStorage，配合typeof window !== "undefined"的判断，彻底避免在服务端环境访问不存在的变量。

修正后的代码 #

useEffect(() => {
  if (typeof window !== "undefined") {
    const storageView = window.localStorage.getItem("calendarView");
    setViewCalendar(storageView ? JSON.parse(storageView) : "Day");
  }
}, []);

useEffect(() => {
  if (viewCalendar !== null && typeof window !== "undefined") {
    window.localStorage.setItem("calendarView", JSON.stringify(viewCalendar));
  }
}, [viewCalendar]);

补充说明 #

服务端渲染（如Next.js等框架）时，组件会先在服务器端执行渲染，此时没有浏览器的window对象和localStorage。因此所有访问浏览器专属API的代码，必须包裹在typeof window !== "undefined"的判断内，同时绝对不能把浏览器特有的变量加入useEffect的依赖数组，否则服务端求值时会直接抛出未定义错误。

内容的提问来源于stack exchange，提问作者steve123