Showcase: UtilVox – 170+ Free Online Tools built with App Router & WebAssembly

[mansoorranjha786]

UtilVox is a high-performance, privacy-first utility hub of 170+ tools designed to replace expensive subscription web apps.

Why We Chose Next.js:

To achieve a completely decentralized processing model, we required a framework that could handle complex client-side engines (like WebAssembly for AI background removal and PDF-lib for document manipulation) while maintaining perfect SEO indexability. Next.js was the absolute perfect fit.

Technical Highlights:

1. Hybrid Architecture (Server vs. Client Components): We utilize Next.js Server Components to render structured layouts, FAQ schemas, and custom SEO metadata for all 138+ tool routes. The heavy interactive tools are lazily imported as Client Components, ensuring a 98+ PageSpeed Performance score.
2. Advanced Webpack Customization: Leveraging Next.js custom Webpack configuration allowed us to enable asynchronous WebAssembly (asyncWebAssembly: true). This lets us run ONNX Runtime locally in the user's browser, enabling AI background removal completely client-side.
3. Dynamic Sitemap Pipeline: We use Next.js force-dynamic sitemaps to dynamically pull our 45+ seeded markdown blog posts from our PostgreSQL database at request time, ensuring Google always has a fresh indexing roadmap.
4. LCP and CLS Optimization: By using Next.js next/font/google for preloading our primary font (Syne) alongside auto-size-adjusted fallback metrics, we eliminated Layout Shifts (CLS) completely, ensuring premium, seamless UX.

Check it out live: utilvox.com