← Back to Architecture Patterns
Architecture Pattern

🔄 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

Phase 1

Proxy Everything

Day 1

Deploy 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.

Phase 2

Migrate High-Impact Pages

Weeks 1-4

Migrate the homepage, key landing pages, or highest-traffic routes to Next.js. Middleware routes these to Next.js; everything else still proxied to legacy.

Phase 3

Expand Page-by-Page

Months 2-6

Migrate more pages each sprint. Each migrated page immediately benefits from Vercel's CDN, ISR, and image optimization. Ship value every sprint.

Phase 4

Migrate Dynamic Features

Months 4-8

Move authenticated pages, dashboards, and API routes. Replace legacy session management with Middleware auth. Fluid Compute for serverless APIs.

Phase 5

Decommission Legacy

Final

Once 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

reMarkable87% faster builds

Incremental migration from legacy platform to Next.js on Vercel. Build times dropped dramatically with each phase.

SonosSeamless cutover

Migrated from custom React setup to Next.js incrementally. No downtime during transition. Each page shipped independently.

TargetPage-by-page

Enterprise-scale migration using Middleware proxying. High-traffic pages migrated first for maximum impact.

🎯 SE Selling Points

Ship Value Day 1

The proxy alone gives CDN benefits. First migrated page shows immediate performance improvement.

Zero Risk

Each page is independently migratable and rollback-able. If a migrated page has issues, revert to the proxy.

Prove ROI Incrementally

Track Core Web Vitals improvement per migrated page. Build the business case with data, not promises.

Team Stays Productive

No 6-month code freeze. Teams ship new features on Next.js while migrating legacy pages in parallel.