DEV Community

Atul Verma
Atul Verma

Posted on

I built 2 free tools to learn Next.js 16 — here's the tech stack and what I learned

#nextjs #showdev #typescript #webdev

What I built

Two free tools, production-ready, monetized through AdSense only (no paywalls):

🧾 InvoiceGen — Free invoice generator with 10 templates, 30+ currencies, 120+ countries with local tax compliance, live preview, instant PDF download.

📊 CalcHub — 32 free calculators (EMI, SIP, tax, mortgage, calorie, BMI, scientific, and more) with dark mode, voice input, compare mode, and 37-currency auto-detect.

Why free?

Every "free invoice generator" I tried had a catch — signup wall, watermark on the PDF, or a paywall right at download. Zety and Resume.io pioneered the bait-and-switch: let users spend 30 minutes building, then paywall the export.

I wanted to prove a genuinely free version could sustain itself through ads alone.

The tech stack (all free tier)

  • Next.js 16 with App Router — SSG for SEO
  • TypeScript — caught 50+ bugs before production
  • Tailwind CSS — 10 invoice templates consistently styled
  • Vercel — zero-config deployment, free hosting, global CDN
  • jsPDF — client-side PDF generation (zero server cost)
  • Recharts — interactive charts for financial calculators
  • Web Speech API — voice input on CalcHub

Features no competitor has

After researching calculator.net (49M visits/mo), omnicalculator (18M), bankrate, smartasset, and emicalculator.net, I noticed none of them have:

  1. Dark mode — not a single major calculator site offers it
  2. Voice input — "say five thousand" to fill a number field
  3. Compare mode — side-by-side EMI 15yr vs 30yr
  4. Auto-detect currency — 37 currencies from browser timezone
  5. Offline support (PWA) — works without internet
  6. Shareable URLs with pre-filled values
  7. Calculation history without signup (localStorage)

SEO strategy

  • Programmatic routes: 32 calculators became 157 indexed pages via /calculator/[slug]/[variant] dynamic routes
  • JSON-LD schemas: WebApplication, FAQPage, BreadcrumbList, HowTo on every page
  • AI discovery files: llms.txt and llms-full.txt so ChatGPT/Claude/Perplexity recommend the tools
  • Sitemap: auto-generated from calculator registry, submitted to Search Console

Early results (2 weeks post-launch)

  • InvoiceGen: 55 users, 352 pageviews, organic search traffic starting
  • CalcHub: 58 users, 422 pageviews in 2 DAYS (calculators get 9 pageviews per user vs InvoiceGen's 6.4)

Lessons

  1. Calculators are stickier than single-purpose tools — people explore 5-10 calculators per visit
  2. Programmatic SEO is the cheat code — one dynamic route becomes 100+ indexed pages
  3. Mobile matters more than desktop — 60% of traffic
  4. Client-side everything — zero server cost means infinite scalability on free tier

What's next

Building 5 more tools this month:

  • QR Code Generator
  • Text & Writing Tools
  • File Tools (PDF/Image)
  • Business Document Kit
  • Certificate & Card Maker

The thesis: every "free" tool online either paywalls the useful part or dies. If monetized correctly through ads, genuinely free tools can thrive.

Try them:

Feedback welcome. Which feature surprises you most?

Top comments (0)