Next.js执行yarn build报错：Failed to collect page data for / 原因排查

• PeerJS依赖浏览器专属API：PeerJS是基于WebRTC实现的库，运行时需要浏览器提供的RTCPeerConnection、WebSocket等API支持，但Next.js执行yarn build时会进行服务器端渲染（SSR），Node.js服务器环境中没有这些浏览器API，直接初始化Peer实例会触发错误。

• 代码在服务器端被执行：你在Home组件顶层直接创建Peer实例，Next.js的SSR机制会在服务器端运行这段代码，由于缺少必要的浏览器环境API，导致页面数据收集失败，最终抛出Failed to collect page data for /的错误。

• 用useEffect限定客户端执行：借助React的useEffect钩子，确保PeerJS的初始化代码只在浏览器客户端运行：

import { Peer } from 'peerjs'
import { useEffect } from 'react'

export default function Home() {
  useEffect(() => {
    const peer = new Peer('pick-an-id-jwrn')
    // 在这里处理peer的连接、事件监听等逻辑
    // 组件卸载时销毁实例，避免内存泄漏
    return () => peer.destroy()
  }, [])

  return <div>页面内容</div>
}

• 动态导入禁用SSR（可选）：通过Next.js的动态导入功能，将PeerJS相关代码隔离在不进行SSR的组件中：

import dynamic from 'next/dynamic'

// 禁用该组件的服务器端渲染
const PeerHandler = dynamic(() => import('./PeerHandler'), { ssr: false })

export default function Home() {
  return <PeerHandler />
}

然后在PeerHandler.tsx中编写Peer的初始化逻辑即可。

内容的提问来源于stack exchange，提问作者János