STSS↗︎-72.2986%
MIST↗︎-60.8889%
WOLF↗︎-52.0446%
LGMK↗︎-50.1961%
XTIA↗︎-50.0%
ICON↗︎-48.0%
LKCO↗︎-46.3576%
DRCT↗︎-45.1278%
SBEV↗︎-45.0%
CCGWW↗︎-42.9769%
MSSAR↗︎-41.9795%
COOTW↗︎-40.8571%
COEPW↗︎-39.3939%
RCT↗︎-38.2051%
CYCUW↗︎-37.5%
AGMH↗︎-36.6091%
MOBBW↗︎-33.8636%
ECX↗︎-33.6283%
TDTH↗︎-33.5412%
FGIWW↗︎-33.3778%
STSS↘︎-72.2986%
MIST↘︎-60.8889%
WOLF↘︎-52.0446%
LGMK↘︎-50.1961%
XTIA↘︎-50.0%
ICON↘︎-48.0%
LKCO↘︎-46.3576%
DRCT↘︎-45.1278%
SBEV↘︎-45.0%
CCGWW↘︎-42.9769%
MSSAR↘︎-41.9795%
COOTW↘︎-40.8571%
COEPW↘︎-39.3939%
RCT↘︎-38.2051%
CYCUW↘︎-37.5%
AGMH↘︎-36.6091%
MOBBW↘︎-33.8636%
ECX↘︎-33.6283%
TDTH↘︎-33.5412%
FGIWW↘︎-33.3778%

Homepage
Programming
Building a Real-Time Application with Next.js and WebSockets

Building a Real-Time Application with Next.js and WebSockets

In this article, we will explore how to build a real-time application using Next.js and WebSockets. We'll start with an overview of what Next.js and WebSockets are, then dive into setting up a basic Next.js project. You'll learn how to implement WebSocket communication to enable real-time features in your application, such as live chat or notifications. By the end, you'll have a solid understanding of how to integrate these technologies to create dynamic, interactive web applications.

Published: March 3, 2025 at 5:54 PM UTC

Introduction to Next.js and WebSockets
In today’s web development landscape, building applications that require real-time data communication has become increasingly popular. Next.js is a powerful framework for building server-rendered React applications, while WebSockets provide a protocol for full-duplex communication channels over a single TCP connection. In this article, we will explore how to combine these two technologies to create a real-time application. We will start by setting up a basic Next.js project and then implement WebSocket communication to enhance our application with real-time features.
Setting Up a Next.js Project
To get started, you first need to create a new Next.js application. This can be done easily using the create-next-app command. Next.js will take care of configuring Webpack and Babel for you, allowing you to focus on building your application without worrying about the underlying build setup.

npx create-next-app@latest my-real-time-app

Installing WebSocket Library
Next, we need to add a WebSocket library to our Next.js project. The popular 'ws' library is a great choice for managing WebSocket connections. You can install it using npm. This library will help us establish a WebSocket server as well as client-side WebSocket communication.
```
npm install ws
```
Implementing WebSocket Server
After installing the library, the next step is to implement the WebSocket server. We can do this by creating a new file in the pages/api directory. This file will handle WebSocket connections from clients. We will set up the server to broadcast messages to all connected clients, allowing for a real-time experience.

// pages/api/socket.js
import { Server } from 'ws';

const wsServer = new Server({ noServer: true });

wsServer.on('connection', (socket) => {
    socket.on('message', (message) => {
        wsServer.clients.forEach((client) => {
            if (client.readyState === client.OPEN) {
                client.send(message);
            }
        });
    });
});

export default function handler(req, res) {
    if (req.method === 'GET') {
        res.socket.server.wss = wsServer;
        res.socket.server.on('upgrade', (request, socket, head) => {
            wsServer.handleUpgrade(request, socket, head, (socket) => {
                wsServer.emit('connection', socket, request);
            });
        });
        res.status(200).end();
    } else {
        res.status(405).end();
    }
}

Creating the WebSocket Client
Now that we have a WebSocket server set up, we can create a client-side component to connect to our WebSocket server. This component will allow users to send and receive messages in real time. We will use the WebSocket API provided by the browser.

import { useEffect, useState } from 'react';

const Chat = () => {
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState('');
    let socket;

    useEffect(() => {
        socket = new WebSocket('ws://localhost:3000/api/socket');

        socket.onmessage = (event) => {
            setMessages((prev) => [...prev, event.data]);
        };

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

    const sendMessage = () => {
        socket.send(input);
        setInput('');
    };

    return (
        <div>
            <div>{messages.map((msg, index) => (<div key={index}>{msg}</div>))}</div>
            <input value={input} onChange={(e) => setInput(e.target.value)} />
            <button onClick={sendMessage}>Send</button>
        </div>
    );
};

export default Chat;

Running the Application
With our WebSocket server and client implemented, we can now run our Next.js application. Start the development server and open multiple browser tabs to see the real-time chat feature in action. As you send messages from one tab, you should see them appear in all other tabs almost instantly.
```
npm run dev
```
Conclusion
In this article, we explored how to build a real-time application using Next.js and WebSockets. We set up a basic Next.js project, implemented a WebSocket server, and created a client-side component to facilitate real-time messaging. By following these steps, you now have a foundational understanding of how to integrate Next.js with WebSocket technology, allowing you to create dynamic and interactive web applications.