# Real-time Applications with Next.js and WebSockets

In today's fast-paced [digital world](https://bytescrum.com/), real-time data communication is crucial for building dynamic and interactive web applications. [WebSockets](https://blog.bytescrum.com/building-a-real-time-chat-application-with-socketio) provide a powerful mechanism to achieve real-time, bidirectional communication between clients and servers. In this blog post, we will explore how to leverage WebSockets with Next.js to build real-time applications.

## Introduction to WebSockets

[WebSockets](https://medium.com/@yassimortensen/an-introduction-to-websockets-10b131182559) offer a full-duplex communication channel over a single, long-lived connection, allowing for instant data exchange between clients and servers. Unlike HTTP, WebSockets maintain an open connection, enabling real-time updates without the need for continuous polling.

### Benefits of Using WebSockets:

1. **Low Latency**: Instant data transmission without the overhead of establishing multiple HTTP connections.
    
2. **Efficient**: Reduced bandwidth usage by maintaining a single connection.
    
3. **Real-Time Communication**: Ideal for applications requiring live updates, such as chat applications, real-time dashboards, and collaborative tools.
    

## Setting Up a Next.js Project

To get [started](https://blog.bytescrum.com/how-to-build-your-first-nextjs-app-step-by-step-tutorial), we'll create a new Next.js project. Ensure you have Node.js installed, then follow these steps:

1. **Initialize the Project**:
    
    ```bash
    npx create-next-app@latest real-time-app
    cd real-time-app
    ```
    
2. **Install Dependencies**:
    
    We'll need `ws`, a WebSocket library for Node.js.
    
    ```bash
    npm install ws
    ```
    

## Creating a WebSocket Server

Next.js allows us to set up custom servers. We'll [create](https://blog.postman.com/set-up-a-websockets-server-in-node-js-postman/) a WebSocket server within our Next.js application.

1. **Create a Custom Server**:
    
    In the root of your project, create a file named `server.js`:
    
    ```javascript
    const { createServer } = require('http');
    const { parse } = require('url');
    const next = require('next');
    const WebSocket = require('ws');
    
    const dev = process.env.NODE_ENV !== 'production';
    const app = next({ dev });
    const handle = app.getRequestHandler();
    
    app.prepare().then(() => {
        const server = createServer((req, res) => {
            const parsedUrl = parse(req.url, true);
            handle(req, res, parsedUrl);
        });
    
        const wss = new WebSocket.Server({ server });
    
        wss.on('connection', (ws) => {
            console.log('New client connected');
    
            ws.on('message', (message) => {
                console.log(`Received message: ${message}`);
                ws.send(`Server: ${message}`);
            });
    
            ws.on('close', () => {
                console.log('Client disconnected');
            });
        });
    
        server.listen(3000, (err) => {
            if (err) throw err;
            console.log('> Ready on http://localhost:3000');
        });
    });
    ```
    
2. **Update** `package.json`:
    
    Modify the `scripts` section to use the custom server:
    
    ```json
    "scripts": {
        "dev": "node server.js",
        "build": "next build",
        "start": "NODE_ENV=production node server.js"
    }
    ```
    

## Integrating WebSocket Client in Next.js

Now, let's set up the WebSocket client in our Next.js application.

1. **Create a WebSocket Hook**:
    
    In the `hooks` directory, create a file named `useWebSocket.js`:
    
    ```javascript
    import { useEffect, useState } from 'react';
    
    const useWebSocket = (url) => {
        const [messages, setMessages] = useState([]);
        const [ws, setWs] = useState(null);
    
        useEffect(() => {
            const socket = new WebSocket(url);
            setWs(socket);
    
            socket.onmessage = (event) => {
                setMessages((prevMessages) => [...prevMessages, event.data]);
            };
    
            return () => {
                socket.close();
            };
        }, [url]);
    
        const sendMessage = (message) => {
            if (ws) {
                ws.send(message);
            }
        };
    
        return { messages, sendMessage };
    };
    
    export default useWebSocket;
    ```
    
2. **Use the WebSocket Hook in a Component**:
    
    Create a `pages/index.js` file to use the WebSocket hook:
    
    ```javascript
    import { useState } from 'react';
    import useWebSocket from '../hooks/useWebSocket';
    
    const Home = () => {
        const { messages, sendMessage } = useWebSocket('ws://localhost:3000');
        const [input, setInput] = useState('');
    
        const handleSubmit = (e) => {
            e.preventDefault();
            sendMessage(input);
            setInput('');
        };
    
        return (
            <div>
                <h1>Real-time Chat</h1>
                <form onSubmit={handleSubmit}>
                    <input
                        type="text"
                        value={input}
                        onChange={(e) => setInput(e.target.value)}
                    />
                    <button type="submit">Send</button>
                </form>
                <div>
                    {messages.map((msg, index) => (
                        <div key={index}>{msg}</div>
                    ))}
                </div>
            </div>
        );
    };
    
    export default Home;
    ```
    

## Running the Application

Start your Next.js application:

```bash
npm run dev
```

Open your browser and navigate to [`http://localhost:3000`](http://localhost:3000). You should see a simple chat interface where you can send messages and receive real-time updates.

<details data-node-type="hn-details-summary"><summary>Conclusion</summary><div data-type="detailsContent">In this blog post, we've explored how to build real-time applications with Next.js and WebSockets. By leveraging WebSockets, we can create dynamic and interactive applications that provide instant updates to users. Whether you're building chat applications, live dashboards, or collaborative tools, Next.js and WebSockets offer a powerful combination for real-time communication.</div></details>

Remember, while this example demonstrates a basic implementation, you can extend and customize it to suit your specific use case. Happy coding!