Next.js中RTCPeerConnection未定义问题及Context传递方案咨询

问题根源是RTCPeerConnection是浏览器专属API，Next.js SSR阶段在服务端执行代码时无法访问，直接初始化会导致ReferenceError。以下是适配Next.js SSR特性的架构方案：

1. 重构RTCProvider组件（强制客户端渲染） #

在Next.js 13+中使用'use client'指令强制组件仅在客户端执行，同时通过useEffect延迟初始化RTCPeerConnection：

'use client';
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';

type RTCContextType = {
  peerConnection: RTCPeerConnection | null;
};

const RTCContext = createContext<RTCContextType | undefined>(undefined);

export function RTCProvider({ children }: { children: ReactNode }) {
  const [peerConnection, setPeerConnection] = useState<RTCPeerConnection | null>(null);

  useEffect(() => {
    // 仅在客户端环境初始化连接
    if (typeof window !== 'undefined' && window.RTCPeerConnection) {
      const pc = new RTCPeerConnection({
        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] // 替换为你的ICE服务器配置
      });
      setPeerConnection(pc);

      // 组件卸载时清理连接
      return () => pc.close();
    }
  }, []);

  return (
    <RTCContext.Provider value={{ peerConnection }}>
      {children}
    </RTCContext.Provider>
  );
}

// 自定义Hook，简化子组件调用
export function useRTC() {
  const context = useContext(RTCContext);
  if (!context) {
    throw new Error('useRTC必须在RTCProvider内部使用');
  }
  return context;
}

2. 在根组件中挂载Provider #

Next.js 12及以下（Pages Router） #

在_app.tsx中直接引入并挂载Provider：

import type { AppProps } from 'next/app';
import { RTCProvider } from '../components/RTCProvider';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RTCProvider>
      <Component {...pageProps} />
    </RTCProvider>
  );
}

export default MyApp;

Next.js 13+（App Router） #

在layout.tsx中挂载Provider：

import { RTCProvider } from './components/RTCProvider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <RTCProvider>{children}</RTCProvider>
      </body>
    </html>
  );
}

3. 子组件中安全使用RTCPeerConnection #

子组件通过useRTC获取实例时，需处理初始化完成前的null状态：

import { useRTC } from '../components/RTCProvider';

export default function RTCComponent() {
  const { peerConnection } = useRTC();

  if (!peerConnection) {
    return <div>RTC连接初始化中...</div>;
  }

  // 这里可以安全调用peerConnection的API
  return <div>RTC连接已就绪</div>;
}

方案优势 #

• 避免SSR阶段的浏览器API报错：通过'use client'和useEffect确保仅在客户端初始化RTCPeerConnection
• 保持Context的全局传递能力：无需拆分组件或复杂的动态导入逻辑
• 资源自动清理：通过useEffect的返回函数在组件卸载时关闭连接，避免内存泄漏

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