Creating Real-Time AI-Powered Dashboards with Next.js 14 and Apache Pinot: A Step-by-Step Guide

In the modern era of data-driven applications, real-time dashboards are crucial for monitoring and analyzing dynamic datasets. Combining Next.js 14, a React-based framework, with Apache Pinot, a real-time distributed OLAP data store, allows developers to create highly interactive dashboards powered by AI. This guide will walk you through the process of building a real-time AI-enabled dashboard using these technologies.

Next.js 14 introduces several features that make it ideal for building dashboards:

• Server Actions: Simplified API handling and server-side function execution.
• Streaming and Suspense: Improved rendering for real-time data updates.
• Edge Runtime: Enhanced performance and low-latency responses.

Apache Pinot is a columnar data store optimized for ultra-low-latency analytics. It’s perfect for ingesting data streams and querying them in real time: – Supports **high throughput** ingestion from sources like Kafka. – Provides **SQL-based query interface** for powerful data analysis. – Optimized for **OLAP workloads**.

Before starting, ensure the following:

1. **Node.js >= 16.8** installed on your system.
2. **Apache Pinot** running locally or on a remote server.
3. Familiarity with **React**, **Next.js**, and **basic SQL**.

Follow these steps to install Pinot locally:

1. Download the Apache Pinot binary:

   wget https://downloads.apache.org/pinot/apache-pinot-incubating-0.12.0/apache-pinot-incubating-0.12.0-bin.tar.gz
   

1. Extract the downloaded file:

   tar -xvf apache-pinot-incubating-0.12.0-bin.tar.gz
   

1. Start Pinot:

   bin/quick-start.sh
   

This will start Pinot with a sample dataset. You can access the UI at `http://localhost:9000`.

Use the following commands to create and set up a new Next.js project:

1. Create the project:

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

1. Navigate to the project directory:

   cd real-time-dashboard
   

1. Start the development server:

   npm run dev
   

To query Apache Pinot, we’ll use Axios. Install it via npm:

npm install axios

Create a helper function to query Apache Pinot. Add a new file: `utils/pinot.js`.

import axios from 'axios';

const PINOT_BASE_URL = 'http://localhost:9000/query';

export const fetchPinotData = async (sqlQuery) => {
  try {
    const response = await axios.post(PINOT_BASE_URL, {
      sql: sqlQuery,
    });
    return response.data;
  } catch (error) {
    console.error('Error fetching data from Apache Pinot:', error);
    throw error;
  }
};

Inside the `pages` directory, create a new file named `dashboard.js`. This will serve as the main dashboard page.

<pre class="wp-block-syntaxhighlighter-code">import React, { useEffect, useState } from 'react';
import { fetchPinotData } from '../utils/pinot';

const Dashboard = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const query = 'SELECT * FROM myTable LIMIT 10'; // Replace 'myTable' with your table name
        const result = await fetchPinotData(query);
        setData(result.resultTable.rows);
        setLoading(false);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>Real-Time Dashboard</h1>
      <table border="1">
        <thead>
          <tr>
            {data[0].map((header, index) => (
              <th key={index}>{header}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.slice(1).map((row, index) => (
            <tr key={index}>
              {row.map((cell, cellIndex) => (
                <td key={cellIndex}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Dashboard;</pre>

Leverage Next.js 14’s Server Actions to fetch and update data in real time. Modify the above code to include a server action for periodic data refresh.

Add a polling mechanism to fetch data every 5 seconds.

useEffect(() => {
  const interval = setInterval(() => {
    fetchData();
  }, 5000); // Poll every 5 seconds

  return () => clearInterval(interval);
}, []);

To deploy your application, use Vercel, the official hosting platform for Next.js:

1. Install the Vercel CLI:

   npm install -g vercel
   

1. Deploy the app:

   vercel
   

Follow the instructions to complete the deployment.

By combining Next.js 14 and Apache Pinot, you’ve built a scalable, real-time AI-powered dashboard. This approach effectively handles high-speed data ingestion and provides instant analytics, making it ideal for applications in finance, e-commerce, IoT, and beyond.