Vercel部署时服务端调用客户端Hook报错求助（use-window.tsx）

核心原因 #

你的useWindow Hook已经正确添加了"use client"指令，但报错的根源是调用该Hook的组件是服务器组件（Next.js 13+默认所有组件都是服务器组件）。服务器端渲染时会尝试执行客户端Hook的代码，而客户端Hook仅能在标记为"use client"的组件中运行。

解决步骤 #

• 给所有使用useWindow的组件添加"use client"指令
  比如你的login页面组件，必须在文件最顶部声明该指令，示例：

  "use client"
  
  import useWindow from "@/src/hooks/use-window";
  
  export default function LoginPage() {
    const { isMobile, isDesktop } = useWindow();
    // 页面其余逻辑
  }
  

• 关键规则：任何依赖浏览器API（如window）的代码，都必须在标记了"use client"的组件或模块中执行，禁止在服务器组件中直接调用客户端Hook。

注意事项 #

• use client必须是文件的第一行内容，不能有注释、空行或其他代码在它之前，否则指令会失效。
• 若多个组件需要使用该Hook，可将这些组件统一标记为客户端组件，或封装一个客户端组件来处理窗口尺寸逻辑，再在服务器组件中引用这个封装组件。

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