Building a Real-Time Outage Map with Vercel and Next.js

Endeavour Energy, a major Australian electricity distribution company, needed to solve the problem of sudden traffic spikes and delayed data updates that occur during storms. Its existing system had the frontend and content layer tightly coupled, making it difficult to scale, and a bottleneck where data refreshes could take over an hour.

To address this, the system was rebuilt with a Headless architecture based on Next.js and Vercel. Each layer now operates independently as follows:

• Next.js (on Vercel): Optimizes frontend performance and handles traffic spikes through server-side rendering (SSR), static generation (SSG), and Edge deployment.
• Supabase: Manages the real-time data layer, serving outage and asset data via API.
• Sitecore: Retained as the existing content and experience platform to preserve editorial workflows.

The new data pipeline uses Vercel Cron Jobs to sync data from the upstream outage system to Supabase every 5 minutes. This job runs via Vercel Functions, providing near real-time information on outage status, affected areas, and estimated restoration times.

As a result, the data refresh cycle, which previously took over 45 minutes, was reduced to under 5 minutes, and the system transition was completed successfully through Incremental Migration without service disruption.