未定义静态NextJS站点中的localStorage : ReferenceError: localStorage

在未定义静态NextJS站点中，当尝试使用localStorage时，会出现ReferenceError: localStorage的错误。这是因为NextJS是一个服务器端渲染（SSR）框架，它的代码在服务器端执行，而localStorage是浏览器端的API，无法在服务器端直接访问。

localStorage是HTML5提供的一种在客户端存储数据的机制，它可以在浏览器中存储键值对，并且在同一域名下的所有页面中共享。它的主要特点包括持久性存储、同源策略限制、大小限制等。

在未定义静态NextJS站点中，如果需要在客户端使用localStorage，可以通过以下步骤解决：

在NextJS中，可以使用useEffect钩子函数来在组件渲染完成后执行客户端代码。在useEffect中，可以通过typeof检查localStorage是否可用，避免在服务器端执行时出现错误。

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    if (typeof localStorage !== 'undefined') {
      // 在这里可以安全地使用localStorage
      localStorage.setItem('key', 'value');
    }
  }, []);

  return <div>My Component</div>;
};

export default MyComponent;

如果需要在多个组件中使用localStorage，可以将相关逻辑封装成一个自定义的hook，方便复用。

import { useEffect } from 'react';

const useLocalStorage = () => {
  useEffect(() => {
    if (typeof localStorage !== 'undefined') {
      // 在这里可以安全地使用localStorage
      localStorage.setItem('key', 'value');
    }
  }, []);
};

export default useLocalStorage;

然后在需要使用localStorage的组件中，使用useLocalStorage自定义hook即可。

import useLocalStorage from './useLocalStorage';

const MyComponent = () => {
  useLocalStorage();

  return <div>My Component</div>;
};

export default MyComponent;

总结：在未定义静态NextJS站点中，由于服务器端无法直接访问localStorage，需要通过在客户端使用useEffect钩子函数来安全地使用localStorage。通过封装自定义hook，可以方便地在多个组件中复用localStorage的逻辑。