Migration WordPress vers Next.js Headless : Guide 2026
Pourquoi migrer WordPress vers Next.js en 2026 ?
WordPress reste excellent pour les non-techniques, mais quand les Core Web Vitals deviennent critiques ou que l'on veut une application web moderne, Next.js en mode headless change la donne. Cas typiques de migration :
- Site WP lent (LCP > 3s) pénalisant SEO
- Besoin d'interface riche JS (animations, interactions)
- Multi-plateformes (web + app mobile + API partenaires)
- Scalabilité (pic trafic qui fait crasher le serveur)
- Sécurité renforcée (WP = cible n°1 pirates)
Architecture cible : WordPress Headless + Next.js
┌─────────────┐ REST/GraphQL ┌──────────────┐
│ WordPress │ ←──────────────────→ │ Next.js 15 │
│ (Admin) │ wp-json/wp/v2/... │ (Front SSG) │
│ MySQL │ │ Vercel CDN │
└─────────────┘ └──────────────┘
Backoffice Site public
éditeurs utilisateursWordPress devient un "content hub" utilisé uniquement par les éditeurs. Le site public est un Next.js ultra-rapide qui récupère le contenu via API REST ou GraphQL.
Les 8 étapes d'une migration réussie
- Audit existant : types de contenu (CPT), taxonomies, plugins critiques, structure URLs
- Préparation WP : activer WP REST API + WPGraphQL, nettoyer plugins superflus
- Setup Next.js : créer projet, configurer
next.config.jspour ISR, Image - Page templates : réplique pixel-perfect des templates WP (home, single, category, search, 404)
- Récupération dynamique :
getStaticProps+getStaticPathspour chaque type de contenu - SEO migration : reprendre title, meta, canonical, schema.org, sitemap.xml, robots.txt à l'identique
- Redirections 301 : crucial, mapping ancien slug WP → nouveau slug Next.js dans
next.config.js - Tests + go-live : staging, checklist pre-launch, bascule DNS + monitoring Search Console
Pièges fréquents à éviter
| Piège | Conséquence | Solution |
|---|---|---|
| Oublier 301 anciennes URLs | Perte 30-70% trafic SEO | Mapping exhaustif + rewrites Next.js |
| Schema.org incomplet | Perte rich snippets Google | Reprendre JSON-LD WP à l'identique |
| Images non-optimisées | LCP mauvais | Utiliser next/image + WP comme source |
| Pagination cassée | 404 sur /page/2 | Dynamic routes Next.js + WP API pagination |
| Commentaires WP orphelins | Perte engagement | Afficher via API ou migrer vers Disqus/Giscus |
| Plugin SEO Yoast perdu | Meta à reconstruire | Exposer Yoast via WPGraphQL + consommer dans Next |
Performance avant/après typique
| Métrique | WP seul | Next.js headless |
|---|---|---|
| LCP (Largest Contentful Paint) | 2,8-4,5s | 0,6-1,4s |
| FCP (First Contentful Paint) | 1,9s | 0,4s |
| TTFB (Time to First Byte) | 800-1500ms | 50-150ms (CDN) |
| Score Lighthouse | 55-75 | 95-100 |
| Poids page | 2,5-4,8 MB | 400-900 KB |
Hébergement et coûts récurrents
- WP admin : VPS Hetzner 5€/mois ou hébergement mutualisé MA 80 MAD/mois
- Next.js front : Vercel Pro 20$/mois ou self-hosted Hetzner 10€
- Média : Cloudflare Images ou Cloudinary (0-50$/mois selon trafic)
- Monitoring : Sentry + Uptime Kuma (gratuits)
Budget migration typique Maroc 2026
| Scope | Délai | Budget MAD |
|---|---|---|
| Blog simple (<100 articles) | 4-6 sem | 28 000-55 000 |
| Site corporate 50+ pages | 8-12 sem | 60 000-130 000 |
| Média avec multi-CPT + multi-langue | 14-22 sem | 150 000-400 000 |
| E-commerce WooCommerce headless | 16-28 sem | 200 000-600 000 |
Projet migration WP → Next.js ? 40+ migrations livrées, zéro perte SEO garantie.
