如何在 Next.js 中使用 localStorage 并且不会出现水合错误？

Question

我想使用本地存储来保存令牌并访问它，

我的代码如下所示：

if (typeof window !== 'undefined') {
    localStorage.setItem(key,value)
}

如果我不使用检查窗口类型的部分，我会收到错误：

本地存储未定义

但这似乎导致了文档中提到的错误，可以通过删除 typeof 窗口检查来修复该错误，因为当我刷新页面时，这似乎会导致水合错误：

Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。

知道在这里做什么吗？

Answer 1

尝试localStorage在以下位置访问useEffect()：

useEffect(() => {
  localStorage.setItem(key, value);
}, []);