Build Next.js Real-Time Chat App in 5 Steps

Build a real-time chat app with Next.js in just 5 simple steps:

1. Start a Next.js Project: Create a new Next.js app and install the required WebSocket libraries (socket.io-client and socket.io).

2. Set Up WebSocket Server: Configure a WebSocket server using socket.io to handle incoming connections and broadcast chat messages.

3. Build Chat Interface: Connect your Next.js client to the WebSocket server, manage chat state, and implement send/receive message functionality.

4. Add Chat Features: Enhance your app with features like displaying active users and handling connection errors.

5. Run and Test Chat App: Start the Next.js and WebSocket servers, open your app in multiple browser windows to simulate users, and evaluate performance.

By following this tutorial, you'll learn how to leverage Next.js and WebSockets to create a seamless real-time chat experience for your users.

Related video from YouTube

Step 1: Start a Next.js Project

Create a New Next.js App

To begin building your Next.js real-time chat application, create a new Next.js project. Run the following command in your terminal:

npx create-next-app my-chat-app

Replace "my-chat-app" with your preferred project name. Once the installation is complete, navigate into the project directory:

cd my-chat-app

Add WebSocket Libraries

Next, install the necessary WebSocket libraries to enable real-time communication in your Next.js app. We'll use the popular socket.io library, which provides a robust and easy-to-use WebSocket implementation.

Install the required packages by running the following commands:

The socket.io-client package will be used on the client-side (in your React components) to establish a WebSocket connection and handle real-time events. The socket.io package will be used on the server-side to create and manage the WebSocket server.

With your Next.js project set up and the necessary WebSocket libraries installed, you're now ready to start building your real-time chat application.

Step 2: Set Up WebSocket Server

Configure WebSocket Server

To establish a WebSocket connection, you need to set up a WebSocket server using socket.io. This server will handle incoming WebSocket connections and broadcast chat messages to connected clients.

Create a new file called server.js in the root of your project directory:

touch server.js

In server.js, import the required socket.io package and create a new instance of the Server class:

const { Server } = require('socket.io');
const io = new Server();

Next, configure the WebSocket server to listen for incoming connections:

io.on('connection', (socket) => {
  console.log('A user connected');

  // Handle disconnection
  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

In this example, we're logging a message to the console when a user connects or disconnects.

Broadcast Chat Messages

To broadcast chat messages to connected clients, you need to emit events from the WebSocket server. Create a new function to handle incoming chat messages:

const broadcastMessage = (message) => {
  io.emit('message', message);
};

This function takes a message parameter and emits an event to all connected clients using io.emit. The event is named message, and it contains the chat message payload.

With your WebSocket server set up and configured, you're now ready to integrate it with your Next.js application. In the next step, we'll explore how to connect to the WebSocket server from your React components.

sbb-itb-5683811

Step 3: Build Chat Interface

Connect to WebSocket Server

To connect your Next.js client to the WebSocket server, you'll use the socket.io-client library. First, install the package:

npm install socket.io-client

In your React component, import the io function from socket.io-client and create a new WebSocket connection:

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

const socket = io('http://localhost:3000');

Replace 'http://localhost:3000' with the URL of your WebSocket server.

Next, use the useEffect hook to set up event listeners for incoming messages and connection/disconnection events:

useEffect(() => {
  socket.on('connect', () => {
    console.log('Connected to WebSocket server');
  });

  socket.on('disconnect', () => {
    console.log('Disconnected from WebSocket server');
  });

  socket.on('message', (message) => {
    // Handle incoming message
    console.log('Received message:', message);
  });

  return () => {
    socket.off('connect');
    socket.off('disconnect');
    socket.off('message');
  };
}, []);

This code sets up event listeners for the connect, disconnect, and message events. The message event listener will be called whenever a new message is received from the server.

Manage Chat State

To manage the chat state in your React component, you can use the useState hook to store the messages and the current input value:

import { useState } from 'react';

const [messages, setMessages] = useState([]);
const [inputValue, setInputValue] = useState('');

When a new message is received from the server, you can update the messages state:

socket.on('message', (message) => {
  setMessages((prevMessages) => [...prevMessages, message]);
});

Send and Receive Messages

To send a message, you can emit an event from the client to the server:

const sendMessage = () => {
  if (inputValue.trim()) {
    socket.emit('message', inputValue);
    setInputValue('');
  }
};

This function checks if the input value is not empty, emits a message event to the server with the input value as the payload, and then clears the input value.

To receive messages from the server, you can listen for the message event as shown earlier:

socket.on('message', (message) => {
  setMessages((prevMessages) => [...prevMessages, message]);
});

This event listener updates the messages state with the received message.

With these components in place, you can render the chat interface, displaying the messages and providing an input field for sending new messages.

Step 4: Add Chat Features

Show Active Users

To display active users in your chat application, use WebSocket events and React state management. Update the activeUsers state when a user connects or disconnects:

const [activeUsers, setActiveUsers] = useState({});

socket.on('connect', (userId) => {
  setActiveUsers((prevActiveUsers) => ({...prevActiveUsers, [userId]: true }));
});

socket.on('disconnect', (userId) => {
  setActiveUsers((prevActiveUsers) => ({...prevActiveUsers, [userId]: false }));
});

Then, render a list of active users:

<ul>
  {Object.keys(activeUsers).map((userId) => (
    <li key={userId}>{userId} is online</li>
  ))}
</ul>

Handle Connection Errors

To handle WebSocket connection errors, use the socket.on('error') event listener. This event is emitted when an error occurs, such as a connection timeout or a server error:

socket.on('error', (error) => {
  console.error('WebSocket error:', error);
  // Handle error, e.g., display an error message to the user
});

You can also use the socket.on('disconnect') event listener to detect when the connection is lost:

socket.on('disconnect', () => {
  console.log('WebSocket connection lost');
  // Handle disconnection, e.g., display a reconnect button
});

By implementing these features, you can create a more robust and user-friendly chat application.

Step 5: Run and Test Chat App

Start the Application

To run your Next.js real-time chat application, follow these steps:

1. Start the Next.js development server by running npm run dev in your terminal. This will launch the app at http://localhost:3000.
2. In a separate terminal window or tab, start the WebSocket server by running node websocket-server.js. This will start the WebSocket server at http://localhost:3001.
3. Open your web browser and navigate to http://localhost:3000. You should now see the chat application interface.
4. Open additional browser windows or tabs to simulate multiple users connecting to the chat. Each new window represents a new user session.

Troubleshoot Issues

If you encounter any issues, try the following troubleshooting steps:

Evaluate Performance

To evaluate the real-time performance of your chat application, consider the following techniques:

By following these steps, you can successfully run and test your Next.js real-time chat application, troubleshoot any issues that arise, and evaluate its performance to ensure a smooth user experience.

Conclusion

Congratulations on completing the 5-step tutorial to build a Next.js real-time chat app! You now have a solid foundation for creating a scalable and engaging chat experience for your users.

Next Steps

Consider exploring additional features and deployment options to enhance your app's functionality and performance. Some ideas include:

By following this tutorial, you've demonstrated your ability to learn and build a real-time chat application. Keep building and experimenting with new technologies!

Related posts

• MongoDB with NextJS: A Developer's Quickstart Guide
• Fast Ship Your NextJS Project: Essential Starters
• Quick Setup Guide: Next JS Tailwind TypeScript Starter
• NextJS Real-Time Apps: GraphQL Subscriptions