How I Built 468 Calculator Tools with Next.js SSG and Zero Backend

#nextjs #webdev #javascript #ssg

How I Built 468 Calculator Tools with Next.js SSG and Zero Backend

I built keisan-tools.vercel.app — a site with 468 calculator tools, all statically generated, running on Vercel's free tier with zero backend.

Here's the technical breakdown.

Why 468 Calculators?

Programmatic SEO (pSEO). Each calculator targets a specific long-tail keyword:

"BMI calculator"
"mortgage payment calculator"
"compound interest calculator"
"日本語 pension calculator" (for Japanese users)

468 pages = 468 chances to rank in Google. Each page is a self-contained tool — not a thin content page, but a fully functional calculator with explanations.

Architecture

keisan-tools/
├── src/
│   ├── app/
│   │   ├── [category]/
│   │   │   └── [tool]/
│   │   │       └── page.tsx    ← Dynamic route, static at build
│   │   └── layout.tsx
│   ├── tools/
│   │   └── definitions.ts     ← All 468 tool configs
│   └── components/
│       ├── Calculator.tsx      ← Generic calculator component
│       └── SEOHead.tsx         ← Per-page meta tags
├── next.config.js
└── package.json

Key Design Decision: Data-Driven Generation

Instead of writing 468 individual pages, I defined each tool as a JSON config:

interface ToolDefinition {
  slug: string;
  category: string;
  title: string;
  description: string;
  inputs: InputField[];
  formula: (inputs: Record<string, number>) => number;
  explanation: string;
}

One Calculator component renders all 468 tools. The formula function handles the math. Next.js generateStaticParams() creates all routes at build time.

Performance Results

Metric	Value
Build time	~3 minutes (468 pages)
Page load (LCP)	<1.2s
Bundle size	89KB gzip
Hosting cost	$0/month
Monthly build minutes	~15 (Vercel free: 6000/month)

Every page scores 95+ on Lighthouse. No client-side data fetching, no loading spinners, no skeleton screens.

SEO Optimization

Each page gets unique:

Title tag: [Tool Name] — Free Online Calculator | Keisan Tools
Meta description: Generated from the tool's explanation text
H1: The tool name
Structured data: SoftwareApplication schema with rating
Internal links: Related tools in the same category

I also submit all 468 URLs to Google via the Indexing API for faster crawling.

The Categories

Category	Count	Examples
Finance	89	Loan, mortgage, compound interest
Health	67	BMI, calorie, body fat
Math	112	Percentages, fractions, geometry
Date/Time	45	Age calculator, date difference
Unit Conversion	78	Length, weight, temperature
Lifestyle	77	Pension, household budget, tax

Lessons Learned

1. generateStaticParams() is the hero.
Without it, building 468 pages would require manual route creation. With it, I just return an array of slugs and Next.js handles everything.

2. Keep formulas pure.
Every calculator formula is a pure function: (inputs) => output. No side effects, no state, no API calls. This makes them trivially testable and cacheable.

3. Japanese + English = broader reach.
I serve both Japanese and English versions of each tool. The Japanese market has fewer competitor tools, so ranking is easier.

4. Free tools drive traffic, traffic drives revenue.
These calculators are free. But every page has contextual ads and links to my paid products. The calculators are the top of the funnel.