Building a Real-Time Application with Pusher and Next.js | Updated 2024

105

Real-time applications have become essential for modern web development, providing instant updates to users without requiring a page reload. Pusher, a powerful real-time communication service, can be seamlessly integrated with Next.js to create such applications. In this article, we will guide you through the steps to build a real-time chat application using Pusher and Next.js.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

• Node.js and npm
• A Pusher account

Steps for Building a Real-Time Application with Pusher and Next.js

Step 1: Setting Up the Next.js Project

First, let’s create a new Next.js project. Open your terminal and run the following command:

npx create-next-app real-time-chat
cd real-time-chat

Step 2: Installing Dependencies

Next, we need to install the Pusher client and server packages. Run the following commands to install them:

npm install @pusher/pusher
npm install @pusher/pusher-js

Step 3: Setting Up Pusher

Sign in to your Pusher account and create a new app. Once the app is created, you will get the necessary credentials: app_id, key, secret, and cluster.

Create a new file named .env.local in the root of your project and add your Pusher credentials:

NEXT_PUBLIC_PUSHER_APP_KEY=your_pusher_app_key
PUSHER_APP_ID=your_pusher_app_id
PUSHER_APP_SECRET=your_pusher_app_secret
PUSHER_APP_CLUSTER=your_pusher_app_cluster

Step 4: Creating the Pusher Server

Create a new folder named utils in the root of your project, and inside it, create a file named pusher.js. This file will contain the server-side code to interact with Pusher.

// utils/pusher.js
const Pusher = require("@pusher/pusher");

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID,
  key: process.env.NEXT_PUBLIC_PUSHER_APP_KEY,
  secret: process.env.PUSHER_APP_SECRET,
  cluster: process.env.PUSHER_APP_CLUSTER,
  useTLS: true,
});

module.exports = pusher;

Step 5: Creating the API Route

Next, we’ll create an API route to trigger Pusher events. Create a new folder named api inside the pages directory, and within it, create a file named message.js.

// pages/api/message.js
import pusher from "../../utils/pusher";

export default async function handler(req, res) {
  const { message, username } = req.body;

  await pusher.trigger("chat", "message", {
    username,
    message,
  });

  res.status(200).json({ success: true });
}

Step 6: Setting Up the Client Side

Now, let’s set up the client-side to send and receive messages. Create a new file named Chat.js in the components directory.

// components/Chat.js
import { useState, useEffect } from "react";
import Pusher from "pusher-js";

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [username, setUsername] = useState("");

  useEffect(() => {
    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_APP_KEY, {
      cluster: process.env.NEXT_PUBLIC_PUSHER_APP_CLUSTER,
    });

    const channel = pusher.subscribe("chat");

    channel.bind("message", (data) => {
      setMessages((prevMessages) => [...prevMessages, data]);
    });

    return () => {
      pusher.unsubscribe("chat");
    };
  }, []);

  const sendMessage = async (e) => {
    e.preventDefault();

    await fetch("/api/message", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ message: input, username }),
    });

    setInput("");
  };

  return (
    <div>
      <h1>Chat</h1>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>
            <strong>{msg.username}:</strong> {msg.message}
          </li>
        ))}
      </ul>
      <form onSubmit={sendMessage}>
        <input
          type="text"
          placeholder="Message"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default Chat;

Step 7: Integrating the Chat Component

Finally, integrate the Chat component into your main application. Update the index.js file in the pages directory.

// pages/index.js
import Chat from "../components/Chat";

export default function Home() {
  return (
    <div>
      <Chat />
    </div>
  );
}

Conclusion

You have now successfully built a real-time chat application using Pusher and Next.js. This setup can be expanded to include more features such as user authentication, private messaging, and more. Pusher’s real-time capabilities combined with the power of Next.js make it a great choice for building modern web applications.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Building a Real-Time Application with Pusher and Next.js – FAQs