Next.js中如何在getStaticProps里获取localStorage数据？

• getStaticProps 是 Next.js 中用于构建时（或增量静态再生阶段）获取数据的函数，运行在服务器环境，而非浏览器客户端。
• localStorage 是浏览器专属的 Web API，仅存在于客户端环境中，服务器端代码根本无法访问这个对象，直接调用会抛出 ReferenceError: localStorage is not defined 类的错误。

根据你的业务需求，分两种场景处理：

场景1：页面渲染时需要用localStorage数据（客户端渲染） #

把获取localStorage的逻辑放到客户端组件里，用useEffect钩子在客户端挂载后执行：

import { useEffect, useState } from 'react';

function TargetPage() {
  const [localStorageData, setLocalStorageData] = useState({ id: '', token: '' });

  useEffect(() => {
    const data = {
      id: localStorage.getItem("id"),
      token: localStorage.getItem("token"),
    };
    setLocalStorageData(data);
  }, []);

  // 后续用localStorageData渲染页面内容
  return (
    <div>
      <p>用户ID：{localStorageData.id}</p>
      <p>Token：{localStorageData.token}</p>
    </div>
  );
}

export default TargetPage;

场景2：必须在服务端处理用户数据（比如验证token） #

如果需要在服务端做token校验这类逻辑，不能依赖localStorage，得通过Cookie传递数据：

1. 客户端先把数据存入Cookie：

// 客户端代码（比如登录成功后）
document.cookie = `id=${userId}; path=/; secure; sameSite=Strict`;
document.cookie = `token=${userToken}; path=/; secure; sameSite=Strict; HttpOnly`;

2. 改用getServerSideProps（因为getStaticProps是构建时执行，无法获取实时请求数据）在服务端解析Cookie：

export async function getServerSideProps(context) {
  const cookieStr = context.req.headers.cookie;
  let id = '';
  let token = '';

  if (cookieStr) {
    const cookiePairs = cookieStr.split('; ');
    cookiePairs.forEach(pair => {
      const [key, value] = pair.split('=');
      if (key === 'id') id = value;
      if (key === 'token') token = value;
    });
  }

  // 这里可以用id和token调用后端接口做验证等操作
  return { props: { id, token } };
}

• 服务端代码永远不要直接调用浏览器专属API（localStorage、window、document等）。
• 敏感数据（比如token）存在localStorage有XSS攻击风险，存入Cookie并设置HttpOnly属性更安全。

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