Building Real-Time Dashboards with Next.js and Server-Sent Events

Introduction

Real-time dashboards have become an essential tool for businesses and organizations to monitor and analyze data as it happens. With the rise of modern web technologies, building real-time dashboards has become more accessible and efficient. In this article, we will explore how to build a real-time dashboard using Next.js and Server-Sent Events (SSE).

What are Server-Sent Events?

Server-Sent Events is a web technology that allows servers to push events to clients over HTTP. It provides a unidirectional channel for servers to send data to clients, enabling real-time updates and streaming data. SSE is supported by most modern browsers and is a popular choice for building real-time applications.

Why Next.js?

Next.js is a popular React-based framework for building server-rendered, statically generated, and performance-optimized web applications. It provides a robust set of features for building complex web applications, including support for Server-Sent Events. Next.js is an ideal choice for building real-time dashboards due to its ability to handle server-side rendering, static site generation, and API routes.

Setting up the Project

To get started, create a new Next.js project using the following command:

npx create-next-app my-dashboard

This will create a new Next.js project in a directory called my-dashboard.

Creating the Server-Sent Event API Route

To create a Server-Sent Event API route, create a new file called pages/api/events.js with the following code:

import { NextApiRequest, NextApiResponse } from 'next';

const events = (req: NextApiRequest, res: NextApiResponse) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });

  // Send an event every 2 seconds
  const intervalId = setInterval(() => {
    res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
  }, 2000);

  // Clean up the interval when the client disconnects
  req.on('close', () => {
    clearInterval(intervalId);
  });
};

export default events;

This code sets up an API route that sends a Server-Sent Event every 2 seconds.

Creating the Dashboard Component

To create the dashboard component, create a new file called components/Dashboard.js with the following code:

import { useState, useEffect } from 'react';

const Dashboard = () => {
  const [time, setTime] = useState('');

  useEffect(() => {
    const eventSource = new EventSource('/api/events');

    eventSource.onmessage = (event) => {
      setTime(event.data);
    };

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

  return (
    <div>
      <h1>Real-Time Dashboard</h1>
      <p>Current Time: {time}</p>
    </div>
  );
};

export default Dashboard;

This code sets up a dashboard component that listens for Server-Sent Events and updates the current time in real-time.

Putting it all Together

To put everything together, update the pages/index.js file to include the dashboard component:

import Dashboard from '../components/Dashboard';

const HomePage = () => {
  return (
    <div>
      <Dashboard />
    </div>
  );
};

export default HomePage;

This code renders the dashboard component on the home page.

Conclusion

In this article, we explored how to build a real-time dashboard using Next.js and Server-Sent Events. We created a Server-Sent Event API route that sends events every 2 seconds and a dashboard component that listens for these events and updates the current time in real-time. With this setup, you can build complex real-time dashboards that stream data to your clients and provide a engaging user experience.