Next.js中本地存储懒初始化的window未定义问题

问题根源 #

直接写if(window)会在服务端渲染阶段触发报错——服务端环境不存在window变量，直接引用未定义变量会抛出ReferenceError。而typeof window是安全的判断方式，即使变量未定义，它只会返回'undefined'，不会触发报错。

修复代码 #

修改判断逻辑，同时确保组件是客户端组件（Next.js 13+ 需添加'use client'指令）：

'use client';

import { useState } from 'react';

const [colors, setColors] = useState(() => {
  if (typeof window !== 'undefined') {
    const storedColor = localStorage.getItem("_appColor");
    return storedColor ? JSON.parse(storedColor) : null;
  }
  return null;
});

补充说明 #

• Next.js 13+ App Router 下，必须在组件顶部添加'use client'，确保组件仅在客户端执行，彻底避免服务端执行初始化逻辑的可能。
• 这种方式保留了useState懒初始化的特性，初始值直接从localStorage读取，不会出现先null再更新的状态闪烁问题，同时规避了服务端的window报错。

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