NextJS条件切换Image组件生产环境失效求助

首先明确：Link组件不是导致生产环境功能失效的直接原因，问题出在状态管理和渲染逻辑的同步上，以下是具体分析和修复步骤：

核心问题分析 #

1. useEffect依赖错误引发状态循环
   你的useEffect依赖项设置为fullWidthBackground，这会形成循环触发：每次状态更新都会重新执行useEffect，而useEffect又会再次修改状态。在生产环境的编译优化或严格模式下，这种循环可能被抑制，导致状态无法正确同步到UI。

2. 冗余状态导致渲染不匹配
   fullWidthBackground的值完全依赖于document.body的class，没必要用state存储。生产环境采用SSR/SSG时，服务器端渲染阶段没有document，客户端hydrate时初始状态与实际DOM状态不一致，会导致显示逻辑出错。

3. 滚动位置钩子的初始值不确定性
   第三方useScrollPosition钩子在生产环境可能初始值不为0，导致页面加载时logo显示逻辑直接偏离预期。

修复后的代码 #

const Header = () => {
  // 自定义滚动位置监听，避免第三方钩子的不确定性
  const [scrollPosition, setScrollPosition] = useState(0)

  useEffect(() => {
    const handleScroll = () => setScrollPosition(window.scrollY)
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  // 直接在渲染时推导背景状态，无需额外state
  const isFullWidthBackground = typeof document !== 'undefined' 
    ? document.body.classList.contains('full-width-hero-background')
    : false

  return (
    <div className="relative">
      <Link href={'/'}>
        {/* 白色logo容器 */}
        <div
          className={`flex items-center transition-opacity duration-300 ${
            isFullWidthBackground && scrollPosition === 0
              ? 'opacity-100'
              : 'opacity-0 pointer-events-none'
          }`}
        >
          <Image
            src="/white-logo.png"
            alt="白色logo"
            width={168}
            height={26}
          />
        </div>
        {/* 深色logo容器 */}
        <div
          className={`flex items-center transition-opacity duration-300 absolute inset-0 ${
            !isFullWidthBackground || scrollPosition > 0
              ? 'opacity-100'
              : 'opacity-0 pointer-events-none'
          }`}
        >
          <Image
            src="/dark-logo.png"
            alt="深色logo"
            width={168}
            height={26}
          />
        </div>
      </Link>
    </div>
  )
}

额外优化说明 #

• 给父容器添加relative定位，两个logo容器用absolute重叠，避免布局偏移；用pointer-events-none确保隐藏的logo不会干扰点击交互。
• 增加过渡动画提升视觉体验，同时避免状态切换时的突兀感。
• 自定义滚动监听逻辑，避免第三方钩子在生产环境的行为差异。

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