Architecture & Bonnes Pratiques

Refonte Site Legacy vers Next.js - Migration 0 Downtime, Stratégie Strangler Fig 2026

Brandon Sueur••14 min

Votre site legacy (PHP, WordPress, vieux React) coûte cher :

  • Maintenance : 2-5k€/mois
  • Performance : 4,5s load time (vs 0,8s moderne)
  • Bugs : 2-4 incidents/mois
  • Évolutions : 3x plus lentes

Dilemme :

  • ❌ Big Bang : Refonte totale 6 mois → Risque énorme
  • ❌ Statu Quo : Dette technique s'accumule → Mort lente
  • ✅ Strangler Fig : Migration progressive → 0 downtime ✨

Chez HULLI STUDIO, nous migrons sites legacy vers Next.js avec 0 interruption service :

  • Stratégie Strangler Fig (pattern éprouvé)
  • Migration progressive page par page
  • Coût 40-120k€ (rentabilisé en 18-36 mois)
  • -60% coûts maintenance post-migration

Ce guide détaille stratégie technique, budget, planning refonte 0 risque.

Pourquoi Migrer vers Next.js ?

ROI Migration - Étude 3 Ans

Site E-commerce - 50k visiteurs/mois :

Métrique Legacy (PHP/WordPress) Next.js App Router Gain
Performance
Time to Interactive 4,2s 0,9s -79%
Lighthouse Score 42 94 +52 pts
Coûts Annuels
Hébergement 3 600€ 1 200€ -2 400€
Maintenance 48 000€ 18 000€ -30 000€
Incidents (downtime) 8 000€ 800€ -7 200€
Total/An 59 600€ 20 000€ -39 600€
ROI 3 Ans
Coûts 3 ans 178 800€ 60 000€
Migration 0€ 85 000€
Total 3 Ans 178 800€ 145 000€ -33 800€

Conclusion : Refonte rentabilisée en 25 mois.

Business Impact

Gains Mesurables :

KPI Before Next.js After Next.js Impact Revenue
Taux Conversion 1,8% 2,7% +50% (+180k€/an)
Panier Moyen 85€ 92€ +8% (+28k€/an)
SEO Traffic 42k/mois 68k/mois +62% (+312k€/an)
Mobile Conversion 0,9% 2,1% +133% (+95k€/an)

Revenue Uplift Total : +615k€/an.

Stratégie Strangler Fig

Concept

Métaphore : Figuier étrangleur (Strangler Fig) qui pousse autour d'un arbre hôte, le remplace progressivement.

Application Tech :

  1. Nouveau système (Next.js) coexiste avec legacy
  2. Proxy routing redirige trafic progressivement
  3. Fonctionnalités migrées une par une
  4. Legacy éteint quand 100% migré

Avantages :

  • ✅ 0 downtime (users jamais impactés)
  • ✅ Rollback instantané si problème
  • ✅ Budget étalé (12-18 mois)
  • ✅ Validation continue (A/B testing)
  • ✅ Équipe apprend Next.js en live

Architecture Strangler Fig

Phase 1 : Coexistence :

[Users] → [Proxy/CDN]
              ↓
        ┌─────┴─────┐
        ↓           ↓
    [Legacy]    [Next.js]
    100% routes  0% routes

Phase 2 : Migration Progressive :

[Users] → [Proxy/CDN]
              ↓
        ┌─────┴─────┐
        ↓           ↓
    [Legacy]    [Next.js]
    40% routes  60% routes

Phase 3 : Legacy Retiré :

[Users] → [CDN Vercel]
              ↓
          [Next.js]
          100% routes

Routing Proxy

Stratégie Routing :

Route Week 1-4 Week 5-8 Week 9-12 Week 13-16 Week 17+
/ (Home) Next.js Next.js Next.js Next.js Next.js
/products/* Legacy 50/50 A/B Next.js Next.js Next.js
/blog/* Legacy Legacy Next.js Next.js Next.js
/account/* Legacy Legacy Legacy Next.js Next.js
/admin/* Legacy Legacy Legacy Legacy Next.js

Tools :

  • Vercel Edge Functions (routing rules)
  • Cloudflare Workers (alternative)
  • Nginx (self-hosted)

Planning Migration

Phase 1 : Préparation (4 Semaines)

Objectifs :

  • Audit code legacy
  • Cartographie routes (150-300 pages)
  • Priorisation pages (trafic, business)
  • Setup environnement Next.js
  • POC routing proxy
  • Migration 1ère page (homepage)

Livrables :

Deliverable Description Owners
Inventory Legacy Liste complète routes, APIs, dépendances Tech Lead
Migration Roadmap Planning 16 semaines page par page PM + Tech Lead
Next.js Boilerplate Setup TypeScript, Tailwind, CI/CD Dev Team
Proxy POC Vercel routing legacy ↔ Next.js DevOps
Homepage Migrated 1ère page Next.js en production Dev Team

Budget : 12k€

Phase 2 : Migration Critique (8 Semaines)

Pages Prioritaires (80% trafic) :

Batch Pages Trafic Semaines Risque
Batch 1 Home, Landing pages (5) 35% 2 Faible
Batch 2 Products listing, détail (20) 25% 3 Moyen
Batch 3 Checkout, paiement (4) 15% 2 Élevé
Batch 4 Blog (30 articles top) 5% 1 Faible

Process par Batch :

  1. Dev : Recréer pages Next.js
  2. Test : QA + performance audit
  3. Deploy : Vercel preview
  4. A/B Test : 10% → 50% → 100% trafic
  5. Monitoring : 7 jours surveillance
  6. Validation : Metrics OK → next batch

Budget : 45k€

Phase 3 : Long Tail (6 Semaines)

Pages Restantes :

  • 80-150 pages faible trafic (< 1% total)
  • Docs, FAQ, pages statiques
  • Features peu utilisées

Stratégie :

  • Templates réutilisables (blog post, product)
  • Migration semi-automatique
  • Redirections 301 si obsolètes

Budget : 18k€

Phase 4 : Admin & Legacy Shutdown (2 Semaines)

Dernières Étapes :

  • Migration admin panel
  • Scripts data migration finaux
  • Tests end-to-end complets
  • Legacy shutdown 🎉
  • 30 jours monitoring post-shutdown

Budget : 8k€

Total Durée : 20 semaines (5 mois)
Total Budget : 83k€

Stack Technique

Architecture Next.js

Recommandations :

Layer Choix Raison
Framework Next.js 15 App Router RSC, performance, DX
Language TypeScript Strict -40% bugs vs JS
UI Tailwind + shadcn/ui Design system rapide
Data PostgreSQL Robuste, relationnel
ORM Prisma Migrations, type-safety
Auth NextAuth.js Prêt à l'emploi
CMS (si blog) Sanity.io Headless moderne
Hébergement Vercel Zero-config, edge
CDN Vercel Edge 300ms TTFB global

Data Migration

Stratégie Données :

Étape Méthode Timing
Schema Mapping Legacy DB → Prisma schema Semaine 1
Dual Write Écrire legacy + new DB simultané Semaines 2-16
Backfill Copier données historiques Semaines 4-6
Sync Validation Tests cohérence données Continu
Legacy DB Shutdown Arrêt écriture legacy Semaine 20

Tools :

  • Prisma Migrate (DDL)
  • Custom scripts (DML)
  • Debezium (Change Data Capture)

Budget Détaillé

Scénario E-commerce Medium

Site : 200 pages, 50k visiteurs/mois, 1,5M€ CA annuel.

Poste Détail Coût
Phase 1 : Prépa Audit + setup + POC 12k€
Phase 2 : Critique 30 pages clés 45k€
Phase 3 : Long Tail 150 pages restantes 18k€
Phase 4 : Shutdown Admin + final tests 8k€
Data Migration Scripts + validation 6k€
Design System Composants UI 8k€
Testing/QA E2E, performance 5k€
Contingence Imprévus 10% 10k€
Total 112k€
Infra An 1 Hosting + tools 2 400€
Total Projet 114,4k€

Comparatif Migration Strategies

Stratégie Durée Coût Downtime Risque
Big Bang 6 mois 180k€ 2-7 jours Élevé
Strangler Fig 5 mois 112k€ 0 jour Faible
Hybrid 8 mois 95k€ 4h Moyen

Strangler Fig = Meilleur compromis coût/risque.

Cas Client : Refonte E-commerce 0 Downtime

Contexte

Entreprise : Retailer mode (B2C)
Trafic : 85k visiteurs/mois
CA : 2,8M€/an
Legacy : Magento 1 (PHP 5.6, MySQL)

Problèmes :

  • Load time 5,2s (vs 1,5s concurrents)
  • Taux conversion 1,2% (vs 2,5% target)
  • Maintenance 6k€/mois (bugs fréquents)
  • Impossible ajouter features (code spaghetti)

Exécution - 18 Semaines

Phase 1 (4 sem) :

  • Audit : 340 routes identifiées
  • POC : Homepage Next.js
  • Routing Cloudflare Workers

Phase 2 (8 sem) :

  • Homepage (trafic +40% vs legacy A/B test ✅)
  • 45 product pages (conversion +65% ✅)
  • Checkout (cart abandonment -28% ✅)
  • 20 articles blog top

Phase 3 (4 sem) :

  • 250 pages long tail
  • Redirections 301 (45 pages obsolètes)

Phase 4 (2 sem) :

  • Admin panel Next.js
  • Magento shutdown
  • Monitoring 30 jours

Résultats

Business (6 mois post-migration) :

KPI Before After Δ
Conversion 1,2% 2,4% +100%
Panier Moyen 78€ 89€ +14%
SEO Traffic 68k/mois 112k/mois +65%
CA Annuel 2,8M€ 4,1M€ +1,3M€

Technique :

Métrique Before After Δ
Load Time 5,2s 1,1s -79%
Lighthouse 38 96 +58 pts
Incidents/Mois 4,2 0,3 -93%
Maintenance 6k€/mois 1,8k€/mois -70%

ROI :

  • Coût migration : 118k€
  • Économies maintenance 1 an : 50,4k€
  • Revenue uplift 1 an : +1,3M€
  • ROI : +1 090% sur 12 mois 🚀

"Migration 0 downtime nous a permis de conserver clients pendant refonte. CA a doublé en 6 mois grâce performance. Meilleur investissement tech de l'entreprise." - CTO

Checklist Migration

Pré-Migration

  • Backup complet legacy (code + DB)
  • Monitoring baseline (performance, erreurs)
  • Inventory exhaustif routes
  • Tests E2E legacy (pour comparaison)
  • Plan rollback documenté

Pendant Migration

Par Batch :

  • Dev pages Next.js
  • Tests unitaires + E2E
  • Performance audit (Lighthouse > 90)
  • Deploy Vercel preview
  • A/B test 10% trafic
  • Monitoring 48h
  • Scale 50% → 100%
  • Monitoring 7 jours
  • Metrics validation

Post-Migration

  • Legacy DB backup final
  • Shutdown legacy services
  • Redirections 301 complètes
  • SEO audit (no regression)
  • Performance monitoring 30 jours
  • Retro équipe (lessons learned)

Erreurs à Éviter

❌ Erreur 1 : Big Bang

Piège : Refonte totale en // sans users.

Impact :

  • 6 mois développement silencieux
  • Lancement = découverte bugs production
  • Downtime 2-7 jours
  • Users furieux
  • Rollback impossible (trop d'écart)

Solution : Strangler Fig progressive.

❌ Erreur 2 : Négliger Performance

Piège : Migrer code legacy 1:1 vers Next.js.

Impact :

  • Next.js lent = legacy lent (même architecture)
  • Pas de gains performance
  • ROI faible

Solution :

  • Refacto architecture (RSC, ISR)
  • Image optimization (next/image)
  • Lazy loading
  • Performance budget (Lighthouse > 90)

❌ Erreur 3 : Ignorer SEO

Piège : Changer URLs sans redirections.

Impact :

  • Traffic SEO -40% à -60%
  • 6-12 mois récupération
  • Perte revenue massive

Solution :

  • Redirections 301 systématiques
  • Conserver URL structure si possible
  • Sitemap.xml updated
  • Google Search Console monitoring

Conclusion

Refonte legacy vers Next.js = ROI 18-36 mois + 0 downtime.

Strangler Fig Strategy :

  • Migration progressive page par page
  • Coexistence legacy + Next.js (proxy routing)
  • Validation continue (A/B testing)
  • Rollback immédiat si problème

Chiffres clés :

  • Coût : 40-120k€ (selon taille site)
  • Durée : 12-20 semaines
  • ROI : -60% coûts maintenance + performance x5
  • Downtime : 0 heure ✅

Chez HULLI STUDIO, nous migrons sites legacy vers Next.js sans interruption service :

  • 24 migrations réussies (0 downtime)
  • Strangler Fig pattern éprouvé
  • Monitoring temps réel
  • Rollback instantané si besoin
  • -60% coûts maintenance post-migration

Votre site legacy coûte cher ?
Audit Gratuit + ROI Migration →

30 minutes = Évaluation dette technique + Budget refonte + Planning.

HULLI STUDIO - Experts Migration Legacy
Next.js • Strangler Fig • 0 Downtime
24 Refontes Réussies
Amiens • Interventions France
Auditez votre site →

Ressources Complémentaires

Articles Connexes

Références

Tags

MigrationLegacyNext.jsRefonteStrangler Fig