Using Relay with Next.js

Connect your Next.js app to a Relay WebSocket server using the Pusher JS client.

Prerequisites

• A running Relay server
• Your App Key and Host

npm install pusher-js

import Pusher from 'pusher-js';

const relay = new Pusher(process.env.NEXT_PUBLIC_RELAY_APP_KEY!, {
  wsHost: process.env.NEXT_PUBLIC_RELAY_HOST ?? 'ws.relaycloud.dev',
  wsPort: Number(process.env.NEXT_PUBLIC_RELAY_PORT ?? 443),
  wssPort: Number(process.env.NEXT_PUBLIC_RELAY_PORT ?? 443),
  forceTLS: true,
  disableStats: true,
  enabledTransports: ['ws', 'wss'],
  cluster: 'relay',
});

export default relay;

Add these to your .env.local file:

NEXT_PUBLIC_RELAY_APP_KEY=your-app-key
NEXT_PUBLIC_RELAY_HOST=ws.relaycloud.dev
NEXT_PUBLIC_RELAY_PORT=443

'use client';

import { useEffect, useState } from 'react';
import relay from '@/lib/relay';

export default function LiveFeed() {
  const [messages, setMessages] = useState<string[]>([]);

  useEffect(() => {
    const channel = relay.subscribe('public-feed');

    channel.bind('message.sent', (data: { message: string }) => {
      setMessages(prev => [...prev, data.message]);
    });

    return () => {
      relay.unsubscribe('public-feed');
    };
  }, []);

  return (
    <ul>
      {messages.map((msg, i) => <li key={i}>{msg}</li>)}
    </ul>
  );
}

To subscribe to private channels, your Next.js app needs an auth endpoint that validates the user and returns a signed token. Configure the authEndpoint option on the Pusher client to point to your backend route. See the API reference for full details on the authentication flow.