CalculatorCase StudyGuidesWikiChecklistSimulatorAbout
about

I practice what
I preach.

A site about hosting costs that follows its own rules. It would be hypocritical if it didn't.

Principles

Cache aggressively

100% static export (SSG). Every page is a plain HTML file, ready for CDN caching with immutable fingerprinted assets.

Prefetch on intent only

Internal routes use <Link prefetch={false}> — no viewport prefetching. External links use plain <a> tags — zero router overhead, zero prefetch leaks. Every link type chosen deliberately.

Lazy-load heavy dependencies

Recharts (~150KB) is loaded via next/dynamic only on pages with charts. The /wiki page loads zero chart JavaScript.

No vendor lock-in

All calculation logic lives in pure TypeScript (lib/). Zero Vercel SDK. Static export means deploy anywhere.

No analytics overhead

Zero analytics scripts. No tracking, no double-dipping, no extra edge requests eating into your budget.

Lightweight first load

No SSR, no API routes, no server runtime. Static HTML + CSS with lazy-loaded JS. The lightest a Next.js app can be.

$0
monthly hosting cost

Static export, free tier, zero compute. The irony of hosting a Vercel cost calculator on Vercel for free is fully intentional.

Right now, traffic fits comfortably into Vercel's free / included quotas, so the marginal cost is effectively $0.

Tech Stack

Next.js 16

App Router, static export, Turbopack

TypeScript

Strict mode, pure calculation logic

Tailwind CSS 4

Utility-first, minimal CSS output

Recharts

Lazy-loaded only on chart pages

Lucide Icons

Tree-shakeable SVG icons

Architecture
01

Static export over SSR.

All calculations happen client-side with React state and useMemo. No server needed — the build produces pure HTML files that any CDN can serve.

02

Calculations in pure TypeScript.

All cost formulas live in lib/calculations.ts — vendor-neutral, testable, portable. Moving to a different framework takes zero logic changes.

03

Charts lazy-loaded per page.

Recharts is heavy (~150KB). Only pages with visualizations load it via next/dynamic. The wiki page loads zero chart JS.

04

No analytics, no tracking.

I don’t need to know how many people use this site. Zero analytics = zero overhead = zero double-dipping risk.

next steps

Want to see all the rules?