Next.js服务端localStorage未定义错误的规避替代方案问询

这个问题很典型——你在服务端执行的代码里调用了浏览器专属的API，肯定会报错的。getServerSideProps是完全在服务器端运行的，而localStorage是浏览器提供的存储API，服务器环境根本没有这个对象，所以你写if (localStorage)的时候，相当于引用了一个未声明的变量，直接触发错误。

下面给你两个靠谱的替代方案，根据你的需求选：

方案1：把localStorage操作移到客户端组件中 #

服务端代码只负责数据获取和逻辑处理，客户端专属的存储操作要放到页面组件或者客户端组件里，比如用useEffect（组件挂载后执行，此时已经在浏览器环境了）：

export default function MyPage({ data }) {
  useEffect(() => {
    // 这里是客户端环境，放心用localStorage
    localStorage.setItem("token", "1234");
    console.log(localStorage.getItem("token"));
  }, []);

  return <div>{/* 你的页面内容 */}</div>;
}

// 服务端逻辑只处理数据，不碰客户端API
export const getServerSideProps = wrapper.getServerSideProps(async (ctx) => {
  const access_token = cookies(ctx).access_token;
  await ctx.store.dispatch(getData(access_token));
  
  return { props: {} };
});

这样分离后，服务端代码干净，客户端操作也安全。

方案2：用Cookie替代localStorage（适合服务端客户端共享数据） #

如果你的需求是把服务端拿到的token同步给客户端，用Cookie会更合适——服务端可以直接设置Cookie，客户端也能读取，而且Cookie会自动在请求中携带（如果需要的话）：

export const getServerSideProps = wrapper.getServerSideProps(async (ctx) => {
  const access_token = cookies(ctx).access_token;
  await ctx.store.dispatch(getData(access_token));
  
  // 在服务端设置Cookie，客户端可以通过document.cookie读取
  ctx.res.setHeader(
    'Set-Cookie',
    `token=1234; Path=/; HttpOnly; Secure; SameSite=Lax`
  );
  
  return { props: {} };
});

注意这里的Cookie属性：HttpOnly可以防止XSS攻击，Secure确保只在HTTPS下传输，根据你的实际环境调整。

额外提醒 #

• 永远不要在getServerSideProps、getStaticProps这类服务端渲染函数里直接用window、document、localStorage这些浏览器API，它们只存在于客户端。
• 虽然有人会用typeof window !== 'undefined'来判断环境，但不推荐在服务端函数里这么做——因为服务端里这些变量本来就不存在，判断逻辑只是避免报错，但本质上还是不应该在服务端写客户端代码，分离逻辑更清晰。

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