MaaS: How to Store and Analyze Real-Time Stock Trading Data Using Next.js and InfluxDB

By Suyash Joshi / Developer
Oct 25, 2024

Navigate to:

Next.js is one of the most popular open source web frameworks for hosting web applications; however, performance monitoring of such applications, until now, has been a mystery. Whether you’re hosting Next.js apps yourself or via third party services like Vercel, it’s always helpful to know how the application is performing to make it more efficient and deliver a pleasant user experience.

In another article, we discussed a use case for monitoring the performance of webapps (Node.js & Express) using the PM2 tool to get application metrics and store them in InfluxDB Cloud for real-time analytics. Here, let’s learn to integrate the same and more within a modern Next.js and React application for trading stocks.

The power of time series data and InfluxDB

Time series data, characterized by data points indexed by time, is at the heart of stock market analytics. InfluxDB 3.0, built on the FDAP stack of open source technologies, is a purpose-built time series database that offers several advantages for handling this type of data:

  • High Ingestion Rates: InfluxDB is designed to handle massive influxes of data points, making it ideal for real-time stock ticker data.
  • Fast Query Processing: Its optimized query engine allows for quick retrieval and analysis of historical data, which is essential for real-time analytics.
  • Efficient Data Compression: InfluxDB uses efficient compression algorithms, reducing storage requirements for large volumes of historical data.
  • Flexible Retention Policies: You can easily manage how long data is kept, balancing historical analysis needs and storage constraints.
  • Time-Based Operations: InfluxDB provides powerful time-based functions and aggregations, crucial for financial data analysis.

Application architecture

Our demo application (which you can download from GitHub) consists of several key components:

  • Frontend: Built with Next.js, providing a responsive and interactive user interface.
  • API Layer: Next.js API routes handle data fetching and writing operations.
  • Data Source: Alpha Vantage API is our source for stock data. You can get a free API from their website.
  • Database: InfluxDB 3.0 Cloud Serverless bucket is our database for time series stock data. You will need an account, which you can create for free if you don’t have one.

Here’s a high-level overview of the data flow:

  • User requests stock data for a specific stock symbol (e.g., AAPL).
  • The application fetches data from Alpha Vantage API.
  • Data is processed and written to InfluxDB Cloud Serverless bucket.
  • The application queries InfluxDB Cloud Serverless bucket to retrieve and display the data in the graph on the web application.
  • Real-time updates are facilitated through periodic querying of an InfluxDB Cloud Serverless bucket.

Key technologies and functions

Next.js

Next.js serves as the foundation of our application, providing both the frontend framework and API routes. Its server-side rendering capabilities ensure fast initial page loads, while its API routes allow us to interact with external services and our database securely.

InfluxDB v3 JavaScript Client

We use the InfluxDB v3 client to interact with our InfluxDB instance. Key functions include:

  1. writeStockData(): Writes stock price data to InfluxDB using the line protocol format.

    stock_price,symbol=AAPL price=150.25 1632735600000000000

    This above line represents:

    • Measurement: stock_price
    • Tag: symbol=AAPL (for Apple Inc.)
    • Field: price=150.25 (the stock price)
    • Timestamp: 1632735600000000000 (nanoseconds since Unix epoch)

  2. queryStockData(): Retrieves stock data from InfluxDB using SQL-like queries.

Alpha Vantage API

The Alpha Vantage API provides us with historical and real-time stock data. We use it to fetch initial data for a given stock symbol.

Handling time series data

One of the challenges in working with time series data is managing data retention and ensuring data points are within the allowed time range. Our application includes logic to filter and adjust timestamps:

const retentionPeriod = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
const oldestAllowedTimestamp = now - retentionPeriod;

const filteredData = data.filter(point => new Date(point.date).getTime() >= oldestAllowedTimestamp);

This ensures that we only write data points within our InfluxDB bucket’s retention period, preventing errors and maintaining data integrity.

Real-time analytics

The application demonstrates real-time analytics capabilities by periodically querying InfluxDB for the latest data: 

const intervalId = setInterval(queryInfluxDB, 30000); // Query every 30 seconds

This allows us to display up-to-date stock information without overwhelming the database with constant queries.

Bringing it home

By combining the power of Next.js for building modern web applications and InfluxDB for efficient time series data management, we’ve created a robust platform for stock data analytics. This article showcases how you can manipulate these technologies to handle real-time data ingestion, fast querying, and efficient data storage—all crucial elements for financial analytics.