DEV Community

Cover image for How I Built a Global SaaS with Next.js 14 and Achieved a 100% Lighthouse Score
Trinc4
Trinc4

Posted on

How I Built a Global SaaS with Next.js 14 and Achieved a 100% Lighthouse Score

#nextjs #webdev #performance #a11y

Pivoting a product is never easy. I recently took the challenge of transforming a localized legacy concept into a global SaaS product targeted at the US market. The result is Culinary Converters, a precision baking tool powered by density data.

But as a developer, my main goal wasn't just "shipping features." It was shipping perfection. I wanted to see all green circles in Google Lighthouse: Performance, Accessibility, Best Practices, and SEO.

Here is how I used Next.js 14 (App Router), Tailwind CSS, and Vercel to hit that elusive 100/100 score across the board.

1. The "Cup Problem" (The Why)

Before talking code, we need to talk physics. In the US, bakers use "Cups" for measurement. The problem? A cup of flour can weigh anywhere from 120g to 150g depending on how compressed it is.

I needed a database that understood Density ($g/ml$).

I open-sourced the documentation on this logic here:
👉 The Precision Baking Database (GitHub)

2. The Stack for Speed

To go global, latency matters. I chose:

  • Next.js 14: For Server-Side Rendering (SSR) and dynamic metadata generation.
  • Tailwind CSS: For zero-runtime overhead styles.
  • Vercel: For Edge Network distribution.

This stack allowed the First Contentful Paint (FCP) to stay under 0.8s, even on 4G networks.

3. The Accessibility Challenge (The Hardest 10%)

Getting to 90% accessibility is easy. Getting to 100% is a war of attrition.

Google Lighthouse is ruthless. It flagged issues I didn't even think about, like the contrast ratio of my gray text (text-slate-400) on white backgrounds.

The Fix:
I had to audit every single color. We moved to text-slate-500 for standard text to ensure a contrast ratio above 4.5:1.

Another major hurdle was the calculator inputs. Screen readers need to know exactly what an input does.

tsx
// Before (Fails Accessibility)
<input type="number" placeholder="Amount" />

// After (100% Score)
<input 
  type="number" 
  id="amount" 
  aria-label="Enter amount to convert"
  placeholder="Amount" 
  className="placeholder:text-slate-500 focus:ring-2 focus:ring-slate-500"
/>
Enter fullscreen mode Exit fullscreen mode

Small changes, huge impact.

  1. International SEO Strategy Since the goal is global traffic, I couldn't rely on static meta tags. I implemented dynamic metadata generation for every ingredient page.

If you search for "All-Purpose Flour density", the page title dynamically reflects exactly what the user is looking for, generated at request time.

  1. The Result The site is now live and serving users globally. It was a journey of obsessing over every pixel and every byte, but seeing those four "100" circles is worth it.

Check out the live performance demo here: 🚀 Live Demo: Culinary Converters

If you are building a SaaS, don't ignore Accessibility. It’s not just for users with disabilities; it’s a direct ranking signal for Google.

Happy coding (and baking)!

Top comments (0)