OJCLabs

Infrastructure Systems

Mic Headless Multilingual Infrastructure.

Rebuilding a public health consulting firm's digital presence as structured, SEO-optimized multilingual infrastructure with headless architecture.

Client: Public Health Consulting FirmTimeline: 10 weeksTeam: 2 engineers
92Lighthouse performance
100SEO score
1.8sLoad time
2 (EN, FR)Languages supported


System architecture.

How it's built.

Component
Purpose
Technology
Reasoning
Headless CMS
Content management separated from presentation
WordPress (headless) via REST API
Client team familiar with WordPress admin UI
Frontend Application
Server-side rendered multilingual application
Next.js 14 with App Router
SSR/SSG for SEO, built-in i18n routing, optimal performance
SEO Infrastructure
Structured data, sitemaps, canonical URLs, hreflang
Custom schema generators + Next.js Metadata API
Full control over SEO, no plugin dependencies
i18n Routing
Language detection, URL structure, locale switching
Next.js i18n routing + custom middleware
Clean URLs per language, automatic redirects
Performance
Image optimization, code splitting, caching
Next.js Image + Vercel Edge Network
Automatic AVIF/WebP, responsive images, global CDN
Deployment Pipeline
Automated builds, preview deployments, rollback
Vercel + GitHub Actions
Zero-downtime deployments, preview URLs per commit

Engineering process.

How it was built.

Audit & PlanningWeek 1–2
  • Crawled existing site: cataloged 400+ pages
  • SEO audit: documented 200+ technical issues
  • Created migration plan: content mapping, URL redirects

Content inventory, technical spec, redirect map

Architecture SetupWeek 3–4
  • Set up Next.js with TypeScript
  • Configured WordPress REST API endpoints
  • Designed URL structure for 2 languages (EN, FR)

Working dev environment, API integration

Core DevelopmentWeek 5–7
  • Built page templates (home, about, services, projects, contact)
  • Implemented multilingual routing
  • Integrated WordPress content via API

Functional frontend with dynamic content

SEO ImplementationWeek 8
  • Generated JSON-LD schemas (Organization, Article, BreadcrumbList)
  • Implemented hreflang tags across all pages
  • Created dynamic XML sitemaps per language
  • Built robots.txt with proper directives

Complete SEO infrastructure

Migration & LaunchWeek 9–10
  • Content migration from old WordPress to headless
  • Implemented 301 redirects (all old URLs preserved)
  • Performance optimization (images, code splitting)
  • Soft launch → monitoring → full launch

Live production site with zero downtime


Engineering challenges.

What broke. How we fixed it.

WordPress REST API Performance

Problem

Fetching 100+ posts via REST API took 4–8 seconds per page load.

Constraint

Cannot migrate away from WordPress (client team trained on it). Shared hosting limits query speed.

Solution

ISR (Incremental Static Regeneration) with 60-second revalidation. Custom WordPress endpoint returning only required fields (payload -70%). Redis caching on Vercel.

Outcome

Page load: 5.2s → 1.8s. TTFB: <200ms. Admin experience unchanged.

Multilingual URL Structure Conflicts

Problem

Two languages (EN, FR) required clean URL structures (/en/about, /fr/a-propos) with automatic locale detection and redirects. Mismatched routes caused 404s and broken canonical chains.

Constraint

Next.js i18n routing doesn't automatically handle slug translation between languages. Canonical URLs needed to be language-specific without duplicate content penalties.

Solution

Built custom middleware for locale detection and redirect logic. Created per-language slug maps for translated routes. Automated canonical and alternate link generation per page.

Outcome

Zero 404s post-migration. Hreflang errors: 0. Canonical chains correct across all languages.

Hreflang at Scale

Problem

400+ pages × 2 languages (EN, FR) = 800+ hreflang tags. Google Search Console flagged missing alternates.

Constraint

Different URL structures per language (/en/about vs /fr/a-propos). Manual implementation for 800+ tags not viable.

Solution

Dynamic hreflang generator mapping content IDs across languages. Middleware auto-generates alternates per route. Fallback logic for untranslated pages.

Outcome

Hreflang errors: zero. International indexing: correct per language. 100% automated.


Measured impact.

Results. Numbers only.

Performance

Page load: 5.2s → 1.8s (65% faster)

Lighthouse performance: 45 → 92

Lighthouse SEO: 67 → 100

TTFB: 800ms → 180ms

LCP: 4.8s → 1.6s

SEO

Structured data coverage: 0% → 100%

Search Console errors: 400+ → 0

Indexed pages: 180 → 420

Organic traffic: +120% in 6 months

Technical

Code bundle: 850KB → 180KB (78% reduction)

Mobile usability errors: 80+ → 0

Deployment time: 30 min manual → 2 min automated

Accessibility score: 72 → 95


Related.

Related systems.


Get started

Need similar architecture?

We build systems for operators serious about scale. If you're ready to invest in infrastructure that compounds, let's design your system.

Start a diagnosticExplore all systems