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

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

• Migration vs Refonte Totale
• Performance Web ROI
• Dette Technique

Références

• Strangler Fig Pattern - Martin Fowler
• Next.js Migration Guide
• Vercel Edge Functions