A full Next.js migration for the IGAD Climate Prediction and Applications Centre — modernising content delivery, integrating live geospatial map layers, and cutting load time by 45%.
ROLE
Full Stack Engineer, Independent Contractor
TIMELINE
Sep 2024 - Jan 2025
Page Load Time Reduction
Lighthouse Score
Codebase Complexity Reduction
Climate map data is served from a MapServer instance exposing OGC-compliant WMS endpoints. On the Next.js side, maps are rendered client-side using Leaflet.js — imported via next/dynamic with { ssr: false } to prevent hydration errors from Leaflet's browser-only APIs. WMS tile layers stream directly from MapServer into the Leaflet canvas, keeping the React layer thin and avoiding expensive server-side GeoJSON serialisation. PostGIS powers the underlying spatial queries, with indexed geometry columns enabling fast bounding-box lookups across IGAD's regional climate datasets.
FIGURE B.01
MapServer WMS → Leaflet.js Rendering Pipeline
Leaflet directly accesses window and document on import — crashing Next.js's server render and throwing hydration mismatches on the client.
Wrapped the map component in next/dynamic with { ssr: false }, isolating all Leaflet instantiation to the browser. This eliminated the crash entirely while keeping the rest of the page statically generated.
MapServer tile responses were slow on low-bandwidth connections, causing visible map lag for users in the IGAD region.
Configured Leaflet's TileLayer.WMS with explicit bounds, min/max zoom, and attribution. Added cache-control headers on the MapServer proxy to serve repeat tile requests from edge cache rather than re-querying PostGIS.
Integrating geospatial tooling into a modern React stack surfaces browser/server boundaries fast — and rewards upfront discipline in how map state is owned.
Any library touching browser globals must be isolated behind next/dynamic — attempting workarounds wastes time and introduces subtle bugs.
Streaming tiles from MapServer was far cheaper than hydrating full GeoJSON on the client — the right tool for regional climate overlays at this scale.
Baseline Lighthouse audits before a single line was changed made it clear exactly where the 45% load gain would come from.
Fixing contrast and semantic markup was one of the quickest wins — and immediately expanded reach for a platform with a global, multilingual audience.
Brian Mutai / Full Stack Engineer