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

#webdev #nextjs #typescript #tailwindcss

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`);