求助：Next.js中出现ReferenceError: localStorage is not defined错误

错误原因 #

Next.js组件会在服务端和客户端双环境执行，localStorage是浏览器专属API，服务端环境不存在该对象。你的代码直接在JSX的条件判断中调用localStorage.getItem('user')，服务端渲染时就会抛出ReferenceError。

适配解决方案 #

方案1：环境判断后访问localStorage #

在调用localStorage前，先检查是否处于浏览器环境，同时增加容错处理避免空值报错：

{typeof window !== 'undefined' && 
  JSON.parse(localStorage.getItem('user') || 'null')?.name === name && (
    <button onClick={handleAddBlock}>Add Block</button>
)}

• typeof window !== 'undefined'确保代码仅在客户端执行
• || 'null'避免localStorage.getItem('user')返回null时JSON解析报错
• 可选链?.防止用户数据不存在时读取name属性报错

方案2：用状态管理客户端数据（推荐） #

通过useState存储用户数据，在组件客户端挂载后再从localStorage读取，分离状态与渲染逻辑：

import React, { useRef, useState, useEffect } from 'react';
// ...保留原有导入

export default function Profile({ name, profile, bio, insta, fb, twt, yt, blocks }) {
  const dialogRef = useRef(null);
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    // 仅在客户端组件挂载后执行
    try {
      const userStr = localStorage.getItem('user');
      setCurrentUser(userStr ? JSON.parse(userStr) : null);
    } catch (err) {
      console.error('解析用户数据失败:', err);
      setCurrentUser(null);
    }
  }, []);

  const handleAddBlock = () => {
    dialogRef.current.showModal();
  };

  return (
    <div>
      {/* ...保留原有渲染代码 */}
      <div id="blocks">
        {blocks.map((e) => (
          <Block key={e.title} img={e.img} title={e.title} desc={e.desc} />
        ))}
        {currentUser?.name === name && (
          <button onClick={handleAddBlock}>Add Block</button>
        )}
      </div>
      {/* ...保留原有弹窗代码 */}
    </div>
  );
}

• useEffect空依赖数组确保仅在客户端初始化时读取一次localStorage
• 增加try-catch处理JSON解析可能出现的格式错误
• 给blocks.map的元素增加key属性，符合React渲染规范

方案3：禁用组件服务端渲染（仅特殊场景使用） #

如果该组件完全不需要服务端渲染，可以用Next.js的dynamic导入禁用SSR：

// 在父组件中导入Profile组件
import dynamic from 'next/dynamic';

const Profile = dynamic(() => import('./profile'), { ssr: false });

此方式会让组件仅在客户端渲染，但会丢失SSR的性能与SEO优势，仅适合纯客户端交互场景。

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