Next.js Real-time Applications

In today's digital landscape, users expect dynamic and responsive experiences that update in real-time without requiring manual page refreshes. Real-time applications deliver instant updates, notifications, and interactions, creating engaging user experiences. Next.js, with its powerful features and flexible architecture, provides an excellent foundation for building real-time applications.

What are Real-time Applications?

Real-time applications are web applications that enable instantaneous data transmission between clients and servers. Unlike traditional web applications that require page refreshes to show new data, real-time applications update content dynamically as soon as new information becomes available.

Common examples include:

Chat applications
Live dashboards and analytics
Collaborative editing tools
Real-time notifications
Live sports updates or stock tickers

Real-time Technologies for Next.js

Next.js can leverage several different technologies to implement real-time functionality:

WebSockets: Provides full-duplex communication channels over a single TCP connection
Server-Sent Events (SSE): Allows servers to push updates to clients
Short/Long Polling: Simple but less efficient techniques for simulating real-time updates
Third-party services: Like Pusher, Firebase, or Ably

Let's explore each of these approaches within the Next.js ecosystem.

Building with WebSockets in Next.js

WebSockets provide a persistent connection between a client and server, allowing for bi-directional communication. This makes them ideal for applications requiring frequent updates in both directions.

Setting up WebSockets with Socket.io

Socket.io is a popular library for handling WebSockets with an elegant API and fallback options.

First, install the necessary packages:

bash
npm install socket.io socket.io-client

Server-side Setup

Create an API route in pages/api/socketio.js:

javascript
import { Server } from 'socket.io';

export default function handler(req, res) {
  if (res.socket.server.io) {
    console.log('Socket is already running');
    res.end();
    return;
  }
  
  console.log('Setting up socket');
  const io = new Server(res.socket.server);
  res.socket.server.io = io;
  
  io.on('connection', (socket) => {
    console.log(`Client connected: ${socket.id}`);
    
    socket.on('send-message', (message) => {
      io.emit('receive-message', message);
    });
    
    socket.on('disconnect', () => {
      console.log(`Client disconnected: ${socket.id}`);
    });
  });
  
  res.end();
}

Client-side Integration

Now, let's create a simple chat component in components/Chat.js:

jsx
import { useState, useEffect } from 'react';
import io from 'socket.io-client';

let socket;

export default function Chat() {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);
  const [connected, setConnected] = useState(false);
  
  useEffect(() => {
    // Initialize socket connection
    const socketInitializer = async () => {
      await fetch('/api/socketio');
      socket = io();
      
      socket.on('connect', () => {
        console.log('Connected to server');
        setConnected(true);
      });
      
      socket.on('receive-message', (message) => {
        setMessages((prevMessages) => [...prevMessages, message]);
      });
    };
    
    socketInitializer();
    
    // Clean up on unmount
    return () => {
      if (socket) socket.disconnect();
    };
  }, []);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (message.trim() && connected) {
      socket.emit('send-message', message);
      setMessage('');
    }
  };
  
  return (
    <div className="chat-container">
      <h2>Real-time Chat</h2>
      <div className="messages-container">
        {messages.map((msg, index) => (
          <div key={index} className="message">
            {msg}
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={message} 
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type your message..."
          disabled={!connected}
        />
        <button type="submit" disabled={!connected}>Send</button>
      </form>
    </div>
  );
}

You can use this component in any page:

jsx
import Chat from '../components/Chat';

export default function ChatPage() {
  return (
    <div>
      <h1>Next.js Real-time Chat Example</h1>
      <Chat />
    </div>
  );
}

Server-Sent Events (SSE) in Next.js

Server-Sent Events provide a one-way channel from server to client, making them ideal for scenarios where updates primarily flow from server to client (like notifications or live feeds).

Creating an SSE API Route

Create an API route in pages/api/sse.js:

javascript
export default function handler(req, res) {
  // Set headers for SSE
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  
  // Send an initial message
  res.write(`data: ${JSON.stringify({ message: 'Connection established' })}\n\n`);
  
  // Set up interval to send updates
  const intervalId = setInterval(() => {
    const data = { 
      timestamp: new Date().toISOString(), 
      value: Math.random() * 100 
    };
    
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 1000);
  
  // Clean up when client disconnects
  req.on('close', () => {
    clearInterval(intervalId);
    res.end();
  });
}

Client-side SSE Consumer

Create a component to consume the SSE events:

jsx
import { useState, useEffect } from 'react';

export default function LiveData() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const eventSource = new EventSource('/api/sse');
    
    eventSource.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      setData(newData);
    };
    
    eventSource.onerror = (error) => {
      console.error('SSE error:', error);
      setError('Connection lost. Please refresh to reconnect.');
      eventSource.close();
    };
    
    return () => {
      eventSource.close();
    };
  }, []);
  
  return (
    <div className="live-data">
      <h2>Live Data Feed</h2>
      {error && <p className="error">{error}</p>}
      {data && (
        <div className="data-display">
          <p>Timestamp: {data.timestamp}</p>
          <p>Value: {data.value.toFixed(2)}</p>
        </div>
      )}
    </div>
  );
}

Using Third-party Services: Pusher Example

For many applications, using a managed service can simplify real-time functionality. Pusher is a popular choice that handles the complexity of maintaining WebSocket connections.

First, install the Pusher packages:

bash
npm install pusher pusher-js

Server-side Pusher Setup

Create a utility file at lib/pusher.js:

javascript
import Pusher from 'pusher';

export const serverPusher = new Pusher({
  appId: process.env.PUSHER_APP_ID,
  key: process.env.NEXT_PUBLIC_PUSHER_KEY,
  secret: process.env.PUSHER_SECRET,
  cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER,
  useTLS: true,
});

Create an API route to trigger events at pages/api/notify.js:

javascript
import { serverPusher } from '../../lib/pusher';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }
  
  const { message } = req.body;
  
  try {
    await serverPusher.trigger('notifications', 'new-notification', {
      message,
      timestamp: new Date().toISOString(),
    });
    
    res.status(200).json({ success: true });
  } catch (error) {
    console.error('Pusher error:', error);
    res.status(500).json({ message: 'Error sending notification' });
  }
}

Client-side Pusher Integration

Create a notifications component:

jsx
import { useState, useEffect } from 'react';
import Pusher from 'pusher-js';

export default function Notifications() {
  const [notifications, setNotifications] = useState([]);
  
  useEffect(() => {
    // Initialize Pusher
    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, {
      cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER,
    });
    
    const channel = pusher.subscribe('notifications');
    channel.bind('new-notification', (data) => {
      setNotifications((prev) => [...prev, data]);
    });
    
    return () => {
      channel.unbind_all();
      channel.unsubscribe();
      pusher.disconnect();
    };
  }, []);
  
  return (
    <div className="notifications">
      <h2>Notifications</h2>
      {notifications.length === 0 ? (
        <p>No new notifications</p>
      ) : (
        <ul>
          {notifications.map((notification, index) => (
            <li key={index}>
              <p>{notification.message}</p>
              <small>{new Date(notification.timestamp).toLocaleTimeString()}</small>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Real-world Application: Collaborative Text Editor

Let's build a simple collaborative text editor using Next.js and Socket.io:

jsx
// components/CollaborativeEditor.js
import { useState, useEffect } from 'react';
import io from 'socket.io-client';

let socket;

export default function CollaborativeEditor() {
  const [content, setContent] = useState('');
  const [users, setUsers] = useState(0);
  const [documentId] = useState('doc-' + Math.random().toString(36).substr(2, 9));
  
  useEffect(() => {
    async function initializeSocket() {
      await fetch('/api/editor-socket');
      socket = io();
      
      socket.on('connect', () => {
        // Join specific document room
        socket.emit('join-document', documentId);
      });
      
      socket.on('document-update', (newContent) => {
        setContent(newContent);
      });
      
      socket.on('user-count', (count) => {
        setUsers(count);
      });
    }
    
    initializeSocket();
    
    return () => {
      if (socket) socket.disconnect();
    };
  }, [documentId]);
  
  const handleChange = (e) => {
    const newContent = e.target.value;
    setContent(newContent);
    socket.emit('content-change', { documentId, content: newContent });
  };
  
  return (
    <div className="collaborative-editor">
      <div className="editor-header">
        <h2>Collaborative Document</h2>
        <span className="user-count">{users} user{users !== 1 ? 's' : ''} online</span>
      </div>
      <textarea
        value={content}
        onChange={handleChange}
        placeholder="Start typing to collaborate..."
      />
      <div className="editor-footer">
        <p>Document ID: {documentId}</p>
        <p>Changes are automatically saved and shared</p>
      </div>
    </div>
  );
}

And the corresponding API route:

javascript
// pages/api/editor-socket.js
import { Server } from 'socket.io';

const documents = new Map();
const documentUsers = new Map();

export default function handler(req, res) {
  if (res.socket.server.io) {
    res.end();
    return;
  }
  
  const io = new Server(res.socket.server);
  res.socket.server.io = io;
  
  io.on('connection', (socket) => {
    let currentDocument = null;
    
    socket.on('join-document', (documentId) => {
      // Leave previous document if any
      if (currentDocument) {
        socket.leave(currentDocument);
        decrementUserCount(currentDocument);
      }
      
      // Join new document
      currentDocument = documentId;
      socket.join(documentId);
      
      // Initialize document if it doesn't exist
      if (!documents.has(documentId)) {
        documents.set(documentId, '');
      }
      
      // Send current document content
      socket.emit('document-update', documents.get(documentId));
      
      // Update user count
      incrementUserCount(documentId);
      io.to(documentId).emit('user-count', documentUsers.get(documentId) || 0);
    });
    
    socket.on('content-change', ({ documentId, content }) => {
      documents.set(documentId, content);
      // Broadcast to all clients except sender
      socket.to(documentId).emit('document-update', content);
    });
    
    socket.on('disconnect', () => {
      if (currentDocument) {
        decrementUserCount(currentDocument);
        io.to(currentDocument).emit(
          'user-count', 
          documentUsers.get(currentDocument) || 0
        );
      }
    });
    
    function incrementUserCount(docId) {
      const count = documentUsers.get(docId) || 0;
      documentUsers.set(docId, count + 1);
    }
    
    function decrementUserCount(docId) {
      const count = documentUsers.get(docId) || 0;
      documentUsers.set(docId, Math.max(0, count - 1));
    }
  });
  
  res.end();
}

Performance Considerations

When building real-time applications with Next.js, keep these performance tips in mind:

Consider connection limits: WebSockets maintain persistent connections, which can impact server resources
Implement reconnection strategies: Network disconnections are inevitable; handle them gracefully
Throttle updates: For high-frequency updates, consider batching or throttling messages
Use proper serialization: Keep payload sizes small for better performance
Scale horizontally: For production applications, use a solution that supports horizontal scaling (like Redis adapters for Socket.io)

Summary

Next.js provides a versatile foundation for building real-time applications using various technologies:

WebSockets (like Socket.io) enable bidirectional communication for chat apps and collaborative tools
Server-Sent Events provide server-to-client updates for dashboards and feeds
Third-party services like Pusher simplify implementation for many use cases

The approach you choose depends on your specific requirements, scalability needs, and development preferences. Real-time features enhance user engagement and provide dynamic experiences that modern web users expect.

Next Steps and Exercises

Build a real-time poll/voting application that updates results as votes come in
Create a collaborative drawing canvas where multiple users can draw together
Implement a typing indicator in the chat application example
Build a real-time dashboard that displays analytics data using SSE
Add presence awareness to show when users are online/offline in your application

Additional Resources

By mastering these real-time technologies within the Next.js ecosystem, you can create engaging, dynamic applications that provide users with immediate feedback and interactive experiences.

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

What are Real-time Applications?​

Real-time Technologies for Next.js​

Building with WebSockets in Next.js​

Setting up WebSockets with Socket.io​

Server-side Setup​

Client-side Integration​

Server-Sent Events (SSE) in Next.js​

Creating an SSE API Route​

Client-side SSE Consumer​

Using Third-party Services: Pusher Example​

Server-side Pusher Setup​

Client-side Pusher Integration​

Real-world Application: Collaborative Text Editor​

Performance Considerations​

Summary​

Next Steps and Exercises​

Additional Resources​