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

typescript dev.to

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?

Source: dev.to

arrow_back Back to Tutorials