Forem: Atul Verma

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

Atul Verma — Tue, 14 Apr 2026 14:59:27 +0000

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:

Dark mode — not a single major calculator site offers it
Voice input — "say five thousand" to fill a number field
Compare mode — side-by-side EMI 15yr vs 30yr
Auto-detect currency — 37 currencies from browser timezone
Offline support (PWA) — works without internet
Shareable URLs with pre-filled values
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

Calculators are stickier than single-purpose tools — people explore 5-10 calculators per visit
Programmatic SEO is the cheat code — one dynamic route becomes 100+ indexed pages
Mobile matters more than desktop — 60% of traffic
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?

I launched a free tool 3 days ago — users from 5 countries, zero marketing budget

Atul Verma — Sun, 12 Apr 2026 06:58:18 +0000

3 days ago I posted about building a free invoice generator with Next.js.
Here's what happened since:

The numbers (3 days, $0 marketing)

24 users from 5 countries (India, USA, Canada, Italy, Poland)
Someone in Canada downloaded a real invoice for their business
84 page views, 33 deep scrolls (people actually reading)
4 sessions from social media (Reddit + Dev.to — thank you!)
Google already indexed 43 out of 47 pages

What worked

SEO from day 1 — I built 47 static pages targeting different
keywords. Each industry template page (freelance, contractor,
photography) is a separate Google entry point. This is how the
Canada user found me.
"See a Demo Invoice" button — one click fills the entire
form with sample data. Users instantly see the quality without
typing anything. This converts visitors into users.
Auto-detecting country — the site reads your browser timezone
and sets your currency, tax label, and language automatically.
The Canada user saw CAD currency without configuring anything.

What I'd do differently

Should have added more currencies from day 1 (started with 5, now have 30+)
Educational content below each tool helps SEO — Google ranks pages with substance, not just widgets
Reddit removed most of my self-promotion posts — commenting on other people's posts works better

What's next

Building a calculator hub next — 15 free calculators (EMI, SIP,
mortgage, tax, BMI, currency converter). Same strategy: free
forever, no signup, beautiful UI, programmatic SEO.

The goal is 10 free tools, all earning through Google AdSense.
No paywalls, no premium tiers.

Try it

freeinvoicegen.org — would love feedback from the dev community.
What features would you add?

How I Built a Free Invoice Generator with Next.js — 47 Pages, Zero Database, $7.50 Total Cost

Atul Verma — Fri, 10 Apr 2026 16:50:28 +0000

I built a free invoice generator that has 47 static pages, zero database, and costs $7.50/year to run. Here's how.

The Stack

Next.js 16 (App Router)
TypeScript
Tailwind CSS
jsPDF (client-side PDF generation)
Vercel (free tier hosting)
Cloudflare ($7.50/year domain)

The Architecture

47 Static Pages at Build Time

I used generateStaticParams to create pages for:

15 industry-specific templates — freelance, contractor, photography, construction, plumbing, electrician, etc. Each page has sample line items, tips, and FAQs specific to that industry.
10 country pages — India (GST), UK (VAT), USA (Sales Tax), Australia (ABN/GST), UAE (TRN/VAT), etc. Each page shows local tax rules, required invoice fields, and popular payment methods.
5 how-to guides — "how to create an invoice", "how to invoice as a freelancer", "how to add tax to an invoice", etc.

All statically generated. Zero runtime cost. Every page is a separate SEO target.

Lazy Loading Heavy Libraries

jsPDF is ~700KB. Users don't need it until they click "Download PDF". So I lazy load it:

Link

Check it out: https://freeinvoicegen.org


javascript
// Only loads when user clicks download
const { generateInvoicePDF } = await import("@/lib/generatePDF");
const doc = generateInvoicePDF(data);
doc.save(`${data.invoiceNumber}.pdf`);