🔄 Enterprise Migration Pattern
Incremental migration: proxy legacy routes via Middleware, migrate page-by-page to Next.js on Vercel. No big-bang rewrite. No downtime. Ship value from day one. reMarkable saw 87% decrease in build times.
The Problem with Big-Bang Rewrites
⏳ Months of Zero Value
Complete rewrite takes 6-12 months. No improvements shipped until the entire site is rebuilt.
💥 Risk of Failure
70% of big-bang rewrites fail or are cancelled. The moving target problem — requirements change while you rebuild.
😩 Team Demoralization
Engineers spend months rebuilding existing functionality. No new features, no user impact. Burnout and attrition.
🎰 All-or-Nothing Launch
One deployment swaps the entire site. If anything breaks, everything breaks. Rollback means losing all progress.
The Incremental Approach
Proxy Everything
Day 1Deploy Next.js on Vercel. Middleware rewrites ALL routes to your legacy site. Users see the exact same site — but now served through Vercel's CDN.
Migrate High-Impact Pages
Weeks 1-4Migrate the homepage, key landing pages, or highest-traffic routes to Next.js. Middleware routes these to Next.js; everything else still proxied to legacy.
Expand Page-by-Page
Months 2-6Migrate more pages each sprint. Each migrated page immediately benefits from Vercel's CDN, ISR, and image optimization. Ship value every sprint.
Migrate Dynamic Features
Months 4-8Move authenticated pages, dashboards, and API routes. Replace legacy session management with Middleware auth. Fluid Compute for serverless APIs.
Decommission Legacy
FinalOnce all routes are migrated, remove the proxy rewrites and shut down the legacy infrastructure. Incremental, safe, reversible.
Middleware Proxy — Code
// middleware.ts
import { NextResponse } from 'next/server';
// Routes that have been migrated to Next.js
const migratedRoutes = [
'/',
'/about',
'/pricing',
'/blog',
'/blog/:slug*',
];
export function middleware(request) {
const { pathname } = request.nextUrl;
// If route is migrated, let Next.js handle it
const isMigrated = migratedRoutes.some(route => {
const pattern = route.replace(':slug*', '.*');
return new RegExp(`^${pattern}$`).test(pathname);
});
if (isMigrated) {
return NextResponse.next(); // Next.js handles this route
}
// Proxy to legacy site for non-migrated routes
return NextResponse.rewrite(
new URL(pathname, 'https://legacy.example.com')
);
}
// next.config.ts (alternative: rewrites in config)
// rewrites: async () => ({
// fallback: [{
// source: '/:path*',
// destination: 'https://legacy.example.com/:path*'
// }]
// })Customer Results
Incremental migration from legacy platform to Next.js on Vercel. Build times dropped dramatically with each phase.
Migrated from custom React setup to Next.js incrementally. No downtime during transition. Each page shipped independently.
Enterprise-scale migration using Middleware proxying. High-traffic pages migrated first for maximum impact.
🎯 SE Selling Points
The proxy alone gives CDN benefits. First migrated page shows immediate performance improvement.
Each page is independently migratable and rollback-able. If a migrated page has issues, revert to the proxy.
Track Core Web Vitals improvement per migrated page. Build the business case with data, not promises.
No 6-month code freeze. Teams ship new features on Next.js while migrating legacy pages in parallel.