Back to Projects
Web Development2022
DEPLOYMENT STATUS: SUCCESS

LOGISTICS PLATFORM REFACTOR

Migrating a legacy SPA to Next.js for Incremental Static Regeneration, improving LCP and SEO immensely.

Lighthouse Score

99

Uptime

99.9%

Avg Latency

40ms

Status

LIVE

01

PROJECT OVERVIEW

Migrating a legacy SPA to Next.js for Incremental Static Regeneration, improving LCP and SEO immensely.

This project showcases our expertise in web development, delivering a robust solution that exceeds industry standards for performance, reliability, and maintainability.

02

THE CHALLENGE

PROBLEM

A logistics SaaS was invisible to search engines (all JS-rendered) with an 8.4s LCP, causing a 67% drop-off rate and near-zero organic acquisition.

OUTCOME

Migrated to Next.js ISR with zero downtime — LCP dropped to 1.4s, organic search impressions grew 340% in 6 months, and the bounce rate fell from 67% to 28%.

03

ARCHITECTURE & CODE

isr-route.ts
TypeScript
1// ISR: pages are static but refresh every 60s automatically
2export const revalidate = 60;
3
4export async function generateStaticParams() {
5 // Pre-build the top 500 most-visited routes at deploy time
6 const topRoutes = await db.routes
7 .findMany({ orderBy: { visits: "desc" }, take: 500 });
8
9 return topRoutes.map((r) => ({ slug: r.slug }));
10}
11
12export default async function ShipmentPage({
13 params,
14}: {
15 params: { slug: string };
16}) {
17 // This fetch is cached and revalidated by Next.js automatically
18 const shipment = await fetchShipment(params.slug);
19
20 if (!shipment) notFound();
21 return <ShipmentView data={shipment} />;
22}
04

DEPLOYMENT PIPELINE

ci/cd — deploy log
6 PASSED
1 HIGHLIGHT
BUILD COMPLETE
01▸ Running codemods (React class → hooks)...
02✓ 84 components migrated — 0 manual fixes needed
03▸ TypeScript strict mode migration...
04✓ tsc --strict — 0 errors (was 247 before refactor)
05▸ Building with Next.js ISR...
06✓ 3,200 static pages generated at build
07✓ ISR revalidation configured — stale-while-revalidate: 60s
08▸ Deploying to Vercel...
09✓ Deployment live — previous version kept for instant rollback
10✓ Lighthouse CI: Performance 99 · SEO 100 · A11y 97
11! Real-user LCP (CrUX): 1.4s — down from 8.4s (83% improvement) ✓
05

PERFORMANCE AUDIT

lighthouse — performance report
99
LIGHTHOUSE PERFORMANCE
EXCELLENT — DEPLOY APPROVED
CORE WEB VITALS
LCP — Largest Contentful PaintTime until the largest element is rendered
1.4sGOOD
FID — First Input DelayResponsiveness to first user interaction
11msGOOD
CLS — Cumulative Layout ShiftVisual stability during page load
0.02GOOD
TTFB — Time to First ByteServer response time to first byte
130msGOOD
TECHNOLOGY STACK
Next.jsReactTypeScriptVercel
INTERESTED?

Let's discuss how we can build something similar for your organization.