Why do I get ReferenceError: RTCPeerConnection is not defined in Next.js?

Question

I am trying to const pc = new RTCPeerConnection() while I get ReferenceError: RTCPeerConnection is not defined. How can I overcome this error?

It is not my browsers, I can run webRTC natively on them.

Answer 1

Next.js pre-renders every page on the server. Trying to use Web APIs when the page gets pre-rendered will throw an error like the one you're seeing since those Web APIs are not present in a Node.js environment.

To solve it, make sure you call new RTCPeerConnection() within your component's useEffect so it only gets called on the client-side.

useEffect(() => {
    const pc = new RTCPeerConnection()
    // Rest of your logic here
}, [])