Real-Time Features in Next.js

// app/api/events/route.ts
export async function GET() {
  const encoder = new TextEncoder();

  const stream = new ReadableStream({
    async start(controller) {
      const sendEvent = (data: any) => {
        controller.enqueue(
          encoder.encode(`data: ${JSON.stringify(data)}\n\n`)
        );
      };

      // Subscribe to updates
      const unsubscribe = pubsub.subscribe('updates', sendEvent);

      // Cleanup on close
      return () => unsubscribe();
    },
  });

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    },
  });
}

// Client component
'use client';

export function LiveUpdates() {
  const [updates, setUpdates] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource('/api/events');

    eventSource.onmessage = (event) => {
      setUpdates((prev) => [...prev, JSON.parse(event.data)]);
    };

    return () => eventSource.close();
  }, []);

  return <UpdateList updates={updates} />;
}

// Custom server needed
// server.js
const { createServer } = require('http');
const { Server } = require('socket.io');
const next = require('next');

const app = next({ dev: process.env.NODE_ENV !== 'production' });
const handler = app.getRequestHandler();

app.prepare().then(() => {
  const server = createServer(handler);
  const io = new Server(server);

  io.on('connection', (socket) => {
    socket.on('message', (data) => {
      io.emit('message', data);
    });
  });

  server.listen(3000);
});

'use client';

import useSWR from 'swr';

export function LiveData() {
  const { data } = useSWR('/api/data', fetcher, {
    refreshInterval: 1000, // Poll every second
    revalidateOnFocus: true,
  });

  return <DataDisplay data={data} />;
}