Table of Contents
Quick Answer
Use the strangler-fig pattern: run old and new side by side, migrate one route/component at a time with AI, keep tests green throughout. Never attempt a big-bang rewrite — they fail 70% of the time.
- Incremental migration keeps the business running
- AI shines at 1-to-1 translation (jQuery to React hooks, PHP controllers to Express)
- The human's job is architecture decisions, not typing
What You'll Need
- Legacy source code with version control
- Target stack chosen (React, Next.js, FastAPI, etc.)
- Test harness or Playwright for visual regression
- Reverse proxy (Caddy/Nginx) to route between old and new
Steps
- Audit the legacy app. Prompt:
List all routes, external dependencies, and database queries in this codebase. - Pick the first slice. A non-critical, self-contained page. Marketing pages work well.
- Migrate one component. Prompt:
Convert this jQuery plugin to a React component using hooks and TypeScript. - Add tests for parity. Playwright visual snapshots catch most regressions.
- Route traffic via proxy. Caddy: new routes go to Next.js, everything else to legacy.
- Repeat per slice. Auth, dashboard, checkout — one PR each.
- Database migration last. Keep one DB during transition, migrate only after UI complete.
- Decommission old code. When traffic drops to zero, remove.
Common Mistakes
- Big-bang rewrite. 70% fail rate historically.
- Migrating the DB first. High risk, low reward early on.
- No visual regression tests. Styling drifts invisibly.
- Changing behavior during migration. Migrate with identical behavior, then improve.
Top Tools
| Tool | Use |
|---|---|
| Cursor agent | Multi-file translation |
| Caddy | Reverse proxy splitting |
| Playwright | Visual regression |
| Claude Code | CLI bulk refactors |
| AST-grep | Deterministic syntax rewrites |
Conclusion
Legacy migration is the highest-value AI workflow of 2026. Strangler-fig + AI cut typical 18-month migrations to 6 months. Start with one page today. Misar Dev automates much of the translation step.