Live Analytics FTW: Building Real-Time Next.js Dashboards Clients Love

Why Real-Time? The Value of Live Data

From Static Reports to Dynamic Insights

Use Cases for Real-Time Dashboards

Choosing Your Real-Time Technology

Short Polling: The Simple but Inefficient Way

WebSockets: The Gold Standard for Bidirectional Communication

Server-Sent Events (SSE): The Simpler, One-Way Alternative

Building the Dashboard: A Practical Guide

Step 1: The Data Source and API

export async function GET() {
  const encoder = new TextEncoder();
  
  const stream = new ReadableStream({
    async start(controller) {
      // Send initial data
      controller.enqueue(
        encoder.encode(`data: ${JSON.stringify({
          visitors: Math.floor(Math.random() * 100),
          pageViews: Math.floor(Math.random() * 500),
          timestamp: new Date().toISOString()
        })}\n\n`)
      );
      
      // Simulate real-time updates
      const interval = setInterval(() => {
        controller.enqueue(
          encoder.encode(`data: ${JSON.stringify({
            visitors: Math.floor(Math.random() * 100),
            pageViews: Math.floor(Math.random() * 500),
            timestamp: new Date().toISOString()
          })}\n\n`)
        );
      }, 2000);
      
      // Clean up on close
      return () => clearInterval(interval);
    }
  });
  
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    },
  });
}

Step 2: Connecting the Frontend with SWR or React Query

import { useEffect, useState } from 'react';

export function useRealtimeAnalytics() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const eventSource = new EventSource('/api/analytics');
    
    eventSource.onmessage = (event) => {
      try {
        const newData = JSON.parse(event.data);
        setData(newData);
      } catch (err) {
        setError(err);
      }
    };
    
    eventSource.onerror = () => {
      setError(new Error('Connection lost'));
      eventSource.close();
    };
    
    return () => eventSource.close();
  }, []);
  
  return { data, error };
}

Step 3: Visualizing the Data with a Charting Library

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
import { useRealtimeAnalytics } from './useRealtimeAnalytics';

export function AnalyticsDashboard() {
  const { data, error } = useRealtimeAnalytics();
  const [history, setHistory] = useState([]);
  
  useEffect(() => {
    if (data) {
      setHistory(prev => [...prev.slice(-20), {
        time: new Date(data.timestamp).toLocaleTimeString(),
        visitors: data.visitors,
        pageViews: data.pageViews
      }]);
    }
  }, [data]);
  
  if (error) return <div>Connection error: {error.message}</div>;
  if (!data) return <div>Connecting to live data...</div>;
  
  return (
    <div className="dashboard">
      <div className="metrics">
        <div className="metric-card">
          <h3>Current Visitors</h3>
          <p className="metric-value">{data.visitors}</p>
        </div>
        <div className="metric-card">
          <h3>Page Views</h3>
          <p className="metric-value">{data.pageViews}</p>
        </div>
      </div>
      
      <LineChart width={800} height={400} data={history}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="time" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="visitors" stroke="#8884d8" />
        <Line type="monotone" dataKey="pageViews" stroke="#82ca9d" />
      </LineChart>
    </div>
  );
}

Step 4: Making it Interactive

export function InteractiveDashboard() {
  const [timeRange, setTimeRange] = useState('1h');
  const [metric, setMetric] = useState('all');
  
  // Modify your data fetching to include these parameters
  const { data, error } = useRealtimeAnalytics({ timeRange, metric });
  
  return (
    <div>
      <div className="controls">
        <select value={timeRange} onChange={(e) => setTimeRange(e.target.value)}>
          <option value="1h">Last Hour</option>
          <option value="24h">Last 24 Hours</option>
          <option value="7d">Last 7 Days</option>
        </select>
        
        <select value={metric} onChange={(e) => setMetric(e.target.value)}>
          <option value="all">All Metrics</option>
          <option value="visitors">Visitors Only</option>
          <option value="pageViews">Page Views Only</option>
        </select>
      </div>
      
      {/* Rest of your dashboard */}
    </div>
  );
}

Leveraging Modern Platforms for a Head Start

Real-Time Databases (e.g., Supabase, Firebase)

const supabase = createClient(url, key);

supabase
  .from('analytics')
  .on('INSERT', payload => {
    console.log('New data!', payload.new);
    updateDashboard(payload.new);
  })
  .subscribe();

Real-Time Data Platforms (e.g., Tinybird, Ably)

Design and UX Best Practices for Real-Time Dashboards

Choose the Right Visualizations

Provide Context and Historical Data

Graceful Handling of Connection Issues

Conclusion

References