Next.js生产构建报错window is not defined如何解决

报错出现在next build的静态页面生成阶段，该阶段代码运行在Node.js服务端环境，不存在浏览器专属的window全局对象。
你在可被服务端/静态构建流程执行的代码位置，直接调用了next-auth/react提供的客户端方法（从报错栈可以定位是signIn方法），该方法默认会读取window.location.href作为登录回调地址，在无window对象的构建环境执行时就会抛出引用错误。
开发模式下Next.js不会做全量静态预生成，相关逻辑只在浏览器端触发，因此不会复现问题。

• 所有用到next-auth/react导出方法（signIn、signOut、useSession等）的组件，必须在文件顶部添加'use client'指令，标记为客户端组件，避免相关代码在服务端/静态构建阶段执行。

• 禁止在组件渲染顶层直接调用signIn、signOut这类客户端方法，仅在浏览器专属的执行上下文里触发：

  • 用户交互事件回调（如按钮的onClick、表单的onSubmit）
  • React的useEffect、useLayoutEffect钩子（这类钩子仅在客户端hydrate后执行，不会在构建阶段运行）

  错误写法参考：

  // 顶层直接调用，构建阶段执行触发报错
  signIn()
  export default function LoginPage() {
    return <p>登录跳转中</p>
  }
  

  交互触发的正确写法参考：

  'use client'
  import { signIn } from 'next-auth/react'
  
  export default function LoginPage() {
    // 点击事件触发，仅在客户端执行
    return <button onClick={() => signIn()}>去登录</button>
  }
  

  初始化自动触发登录的正确写法：

  'use client'
  import { useEffect } from 'react'
  import { signIn } from 'next-auth/react'
  
  export default function LoginPage() {
    useEffect(() => {
      // useEffect 仅在客户端运行，构建阶段不会执行
      signIn()
    }, [])
    return <p>登录跳转中</p>
  }
  

• 区分服务端、客户端的next-auth导入：服务端组件、服务端逻辑不要从next-auth/react导入方法，要使用next-auth提供的服务端对应API。

• 若对应页面不需要静态生成，可以在页面文件中导出配置强制跳过静态生成，走服务端动态渲染：

  export const dynamic = 'force-dynamic'
  

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