localStorage 未定义 - Next.js

Question

我刚刚设置了一个函数来在使用 Tailwind CSS 时切换暗模式。这个错误突然出现，因为它像 5 分钟前一样工作正常。我没有更改任何代码，但突然出现此错误。

我正在使用 Next.js 和 Tailwind CSS。不是代码专家，只是学习和尝试。这是我使用 localStorage 的功能：

  const [theme, setTheme] = useState(localStorage.theme);
  const colorTheme = theme === 'dark' ? 'light' : 'dark';
  useEffect(() => {
    const root = window.document.documentElement;

    root.classList.remove(colorTheme);
    root.classList.add(theme);
    localStorage.setItem('theme', theme);
  }, [theme, colorTheme]);

  return [colorTheme, setTheme];
}

希望在这里有一些光线。这对我来说很奇怪，因为它正在工作????

Answer 1

这是因为 nextjs 在服务器端和客户端都运行。在服务器端，你不能访问拥有 localStorage 的 window 对象，它只会在组件挂载到 dom 时出现。因此，您可以像这样将 localStorage 移动到 useEffect 挂钩

const [theme, setTheme] = useState();

useEffect (() => {
  
     setTheme(localStorage.theme)
    
}, []);