PeerJS with Next.js

PeerJS is a JavaScript library that provides a simple and easy-to-use API to establish peer-to-peer connections between browsers. Next.js is a popular framework for building server-side-rendered (SSR) React applications. Combining PeerJS with Next.js can enable real-time communication between clients without the need for a central server.

Installation

To use PeerJS with Next.js, you can install both libraries through npm:

npm install peerjs next

Usage

Here’s an example of how you can integrate PeerJS with Next.js:

// pages/index.js
import React, { useEffect, useState } from 'react';
import Peer from 'peerjs';

const IndexPage = () => {
  const [peer, setPeer] = useState(null);
  const [peerId, setPeerId] = useState(null);

  useEffect(() => {
    const initializePeer = async () => {
      const newPeer = new Peer({
        // PeerJS options
      });
      
      newPeer.on('open', (id) => {
        setPeerId(id); // Save the generated peer ID
      });

      newPeer.on('connection', (conn) => {
        conn.on('data', (data) => {
          console.log('Received data:', data);
          // Handle incoming data here
        });
      });

      setPeer(newPeer);
    };

    initializePeer();
  }, []);

  const connectToPeer = (peerId) => {
    const connection = peer.connect(peerId);
  
    connection.on('open', () => {
      connection.send('Hello from the client!');
      // Send data to the connected peer
    });
  
    connection.on('data', (data) => {
      console.log('Received data:', data);
      // Handle incoming data here
    });
  };

  return (
    

      
PeerJS with Next.js
      
Your Peer ID: {peerId}
       connectToPeer('another-peer-id')}>
        Connect to another peer
      
    
  );
};

export default IndexPage;

In the above example, we’re creating a Peer instance and saving it in the state. Once the Peer instance is initialized, the ‘open’ event is fired, providing us with a unique peer ID. We’re also setting up a listener for incoming connections. When a connection is established, the ‘data’ event is triggered whenever data is received from the remote peer.

The connectToPeer function is used to initiate a connection to another peer by providing their peer ID. We connect to the peer, and once the connection is open, we can send data to the remote peer. We can also listen for incoming data through the ‘data’ event on the connection.

Conclusion

By using PeerJS with Next.js, you can create real-time communication between clients without the need for a central server. This can be useful for various applications such as multiplayer games, video chats, or collaborative document editing. Remember to handle security measures when establishing peer-to-peer connections.