React及Next.js项目出现Window is not defined报错如何解决

Next.js 具备服务端渲染/静态生成能力，组件代码会先在Node.js服务端环境执行一次，而window是仅浏览器环境存在的全局对象，服务端运行阶段直接访问window就会抛出该错误。普通React项目为纯客户端渲染，所有代码都在浏览器环境执行，因此不会触发报错。

修复方案 #

• 方案1：将所有访问window的逻辑放入useEffect钩子中
  useEffect仅会在客户端组件挂载完成后执行，此时已可以正常获取window对象，是最常用的修复方式。
  代码示例：

  import { useEffect, useState } from 'react'
  
  const Navbar = () => {
    const [scrollPosition, setScrollPosition] = useState(0)
  
    useEffect(() => {
      // 所有window相关操作都放在useEffect内部
      const handleScroll = () => {
        setScrollPosition(window.scrollY)
      }
      window.addEventListener('scroll', handleScroll)
      // 组件卸载时清除监听
      return () => window.removeEventListener('scroll', handleScroll)
    }, [])
  
    // 剩余组件渲染逻辑
  }
  

• 方案2：访问window前先做环境判断
  若需要在useEffect外使用window相关属性，可先判断当前是否为浏览器环境再执行操作：
  代码示例：

  // 全局判断当前运行环境
  const isClient = typeof window !== 'undefined'
  
  // 使用时先判断
  const navHeight = isClient ? window.innerHeight * 0.08 : 56
  

• 方案3（Next.js 13+ App Router适用）：组件顶部添加'use client'指令
  标记该组件为客户端组件，所有逻辑仅在客户端执行，注意组件初始化同步阶段访问window仍需要配合环境判断使用。
  代码示例：

  'use client'
  // 上述指令必须放在文件最顶部
  import { useState } from 'react'
  
  const Navbar = () => {
    // 组件逻辑
  }
  

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