In this post, we’ll outline how we built a lightweight, metadata-driven calculator engine using Next.js App Router and Static Site Generation (SSG).

1. The Architecture: JSON-Driven Components

Instead of writing a custom React component for every calculator (which bloats your JavaScript bundle), we designed a generic <CalculatorEngine /> component that reads metadata configs.

Each calculator is defined as a simple TypeScript object:

export interface Calculator {
  id: string;
  name: string;
  slug: string;
  inputs: { id: string; label: string; type: "number" | "range" | "select"; defaultValue: any }[];
  results: { id: string; label: string; format: "currency" | "number" | "percentage" }[];
  formulaKey: string;
}

2. Dynamic Math Execution Without eval()

Executing formulas dynamically from strings is a major security risk (leading to XSS vulnerabilities if you use eval()). To bypass this, we map formula keys to pure, static math functions in a central library:

// src/lib/formulas.ts
export const FORMULAS: Record<string, (inputs: Record<string, any>) => Record<string, number>> = {
  compoundInterest: (inputs) => {
    const p = Number(inputs.principal);
    const r = Number(inputs.rate) / 100;
    const t = Number(inputs.time);
    const n = Number(inputs.compoundingFrequency || 1);

    const amount = p * Math.pow(1 + r / n, n * t);
    const interest = amount - p;

    return { totalAccumulated: amount, interestEarned: interest };
  }
};

export function executeFormula(key: string, inputs: Record<string, any>) {
  const formula = FORMULAS[key];
  return formula ? formula(inputs) : {};
}

3. Optimizing for SEO and Lighthouse

By using Next.js App Router and compiling the pages during build time (next build) with generateStaticParams, we achieved several performance wins:

1. Zero Layout Shift (CLS): The HTML skeleton is pre-compiled, and only the inputs hydrate dynamically.

2. Instant FCP (First Contentful Paint): Pages load in under 0.2s because there is no API database fetch during routing.

3. Search Bot Crawlability: Search engines (Google, Bing, Yandex) crawl the static HTML directly, instantly index the FAQs, and recognize embedded JSON-LD schemas.

4. Live Implementation Example

We've deployed this architecture live on our global calculator directory.

👉 Check out the interactive, SSG-driven calculators on ProCalc or try out the ProCalc SIP Investment Calculator to see the speed and layout optimizations in action.