📚 This is Part 1 (Opening) of the UtlKit Tech Series —
As a frontend developer, I've used countless online tools. And almost all of them suck:
- Sign-up required — just to format a JSON string?
- Ad overload — the actual tool gets squeezed into a corner
- Privacy concerns — your JSON might contain API keys, and the tool sends it to a server
- Fragmented — formatters on one site, Base64 on another, hashing on a third
So I decided to build one that doesn't: no sign-up, no ads, pure client-side computation, data never leaves the browser.
The goal was simple — if I need this tool, someone else does too.
The result is utlkit.com: 150+ tools, 8 categories, zero server costs.
Requirements
| Requirement | Meaning |
|---|---|
| Pure client-side | All logic runs in the browser |
| Zero server cost | Static hosting, no Node.js backend |
| 150+ pages | One page per tool, SEO-friendly |
| Bilingual (EN/ZH) | i18n support |
| Dark/Light mode | User preference |
| Mobile responsive | Works on all devices |
Why Not Other Frameworks?
| Option | Pros | Cons | Verdict |
|---|---|---|---|
| Vanilla HTML/JS | Simple | Managing 150+ pages is painful | Too slow |
| VuePress / VitePress | Fast | Docs-oriented, not for interactive tools | Not flexible enough |
| Nuxt SSR | Powerful | Needs a server | Violates zero-cost principle |
Next.js 15 + output: 'export' |
SSR SEO + client interactivity + static hosting | Has pitfalls (covered later) | ✅ Best balance |
The Key Decision: output: 'export'
// next.config.js
const nextConfig = {
output: 'export', // Static export
trailingSlash: true, // Required for static files
images: { unoptimized: true }, // No image optimization server
}
This means:
- ✅ Build output is plain HTML/CSS/JS files
- ✅ Deployable to any static host (Cloudflare Pages, Vercel, GitHub Pages)
- ✅ Zero server cost
- ❌ No API Routes, no Server Components, limited dynamic routing
Deployment: Zero Cost on Cloudflare Pages
Build output: out/ directory, ~14 MB
Hosting: Cloudflare Pages
Domain: utlkit.com
Monthly cost: $0
Build Pipeline
npm run build
→ next build (output: 'export')
→ Generates out/ directory
→ clean-index-txt.js (removes index.txt)
→ Outputs 150+ static HTML files
Cloudflare Pages CI/CD: git push → auto build → auto deploy, ~3 minutes to production.
What's Coming Next in This Series
Above is the story and the tech choices. The following articles cover real-world pitfalls:
| Part | Title | Core Problem |
|---|---|---|
| 1 | Architecture and Trade-offs | Structure, reusability & trade-offs |
| 2 | React 19 Hydration Mismatch in Static Export | SSR/CSR inconsistency |
| 3 | Cloudflare Pages Blank Page: the index.txt Bug | Content negotiation mechanism |
| 4 | Why Node.js Libraries Fail in the Browser |
fs dependencies, ESM/CJS interop |
| 5 | Sentry Source Maps: From 0% to Full Resolution | Tree-shaking, HTTP API, region detection |
| 6 | Client-Side Encryption with Web Crypto API | MD5 gap, AES-GCM, HMAC |
| 7 | Free Performance Monitoring: PageSpeed CI | Zero-cost Core Web Vitals monitoring |
| 8 | Cloudflare Cache Hit Rate: 7% → 90% | 3 Cache Rules + localization optimization |
| 9 | Perfect Dark Mode: From Hydration Error to Zero Flicker | Troubleshooting 8 pitfalls |
| 10 | 6 Pitfalls of Multilingual Sites | query string → path prefix, 3 rounds of redesign |
Each article includes full debugging process, code examples, and lessons learned.
📚 This is Part 1 (Opening) of the UtlKit Tech Series — > - Next: Architecture & Trade-offs →
Project Info
- Website: utlkit.com
- Stack: Next.js 15 + React 18 + TypeScript + Tailwind CSS
- Hosting: Cloudflare Pages
- Tools: 150+ tools, 8 categories
- Cost: $0/month
Part 2 will cover architecture design: directory structure, component abstraction, browser-only trade-offs, and i18n approach. Follow along for the full series.