Votre site a été construit sur Webflow. Au début, tout fonctionnait parfaitement. Mais les limites finissent par se faire sentir : contraintes du CMS, performances insuffisantes, fonctionnalités manquantes qui obligent à des contournements créatifs. Next.js devient une option sérieuse.
La migration de Webflow vers Next.js est un chemin bien balisé, à condition de cadrer correctement le projet. La complexité se cache dans les détails : il ne s'agit pas d'un simple export/import. Voici à quoi ressemble le processus en pratique.
Quand la migration est justifiée
Tous les sites Webflow n'ont pas besoin de migrer. Une simple page marketing mise à jour mensuellement par un designer fonctionne très bien sur Webflow. La migration devient pertinente lorsque :
- Vos besoins CMS dépassent la limite de 10 000 entrées de Webflow ou son modèle de données rigide
- Vous avez besoin d'une vraie internationalisation, pas de la localisation limitée de Webflow
- Des fonctionnalités personnalisées (authentification, tableaux de bord, API) exigent plus que des blocs intégrés
- Le score PageSpeed mobile est inférieur à 70 et affecte votre SEO sans solution sur la plateforme actuelle
- Le coût mensuel de Webflow et des outils tiers dépasse l'investissement de la migration
Ce que vous quittez et ce vers quoi vous allez
| Aspect | Webflow | Next.js |
|---|---|---|
| Hébergement | Serveurs Webflow | Vercel / AWS / tout CDN |
| CMS | Intégré (limité) | CMS headless, MDX ou fichiers |
| Styles | Éditeur visuel | Tailwind, CSS Modules ou toute approche CSS |
| Formulaires | Webflow Forms (limité) | Formulaires personnalisés avec n'importe quel backend |
| Animations | Webflow Interactions | Framer Motion, GSAP, animations CSS |
| Logique personnalisée | Blocs intégrés et outils tiers | Code natif, sans limites |
Le processus de migration
Étape 1 : audit du contenu (1-2 jours)
Exportez les données du CMS Webflow en CSV. Inventoriez chaque page, collection et ressource. Déterminez ce qui reste, ce qui sera restructuré et ce qui sera supprimé. C'est aussi le bon moment pour faire le ménage : la plupart des sites contiennent des pages qui n'ont plus de raison d'être.
Étape 2 : transposition du design (2-5 jours)
Le design existant peut être conservé à l'identique. Le rendu visuel ne change pas. C'est la technologie sous-jacente qui évolue : les composants Webflow sont traduits en composants React, et les animations reconstruites avec Framer Motion ou en CSS pur.
C'est aussi l'occasion de corriger les problèmes de design accumulés au fil du temps : points de rupture responsifs imparfaits, décalages de mise en page sur mobile, espacement incohérent. Tout cela se règle pendant la transposition.
Étape 3 : configuration du CMS (1-3 jours)
Le contenu a besoin d'un nouvel hébergement. Les options comprennent un CMS headless comme Sanity ou Contentful, des fichiers Markdown/MDX dans le dépôt, ou une structure de contenu personnalisée. Le choix dépend des personnes qui doivent modifier le contenu et de la fréquence à laquelle elles le font.
Pour la plupart des sites d'entreprise, un contenu en fichiers avec un service d'édition géré est l'approche la plus simple et la plus rentable.
Étape 4 : construction et tests (3-7 jours)
Le site Next.js est construit, testé sur tous les appareils et optimisé pour les performances. Chaque page est vérifiée par rapport à la version Webflow pour s'assurer que rien ne manque. Formulaires, intégrations et scripts de suivi sont tous reconnectés.
Étape 5 : migration SEO (1 jour)
C'est l'étape qui inquiète le plus. La clé est la parité des URL. Chaque URL existante reste identique ou bénéficie d'une redirection 301 appropriée. Les métadonnées, les balises Open Graph et les données structurées sont toutes transférées. Lorsque la migration est exécutée avec un mapping de redirections correct et la préservation des hreflang, les pertes de classement sont généralement minimes et temporaires ; certains sites constatent même des améliorations en quelques semaines grâce aux gains de performance.
Étape 6 : mise en ligne et surveillance (1 jour)
Bascule DNS, vérification SSL, tests finaux et surveillance. La bascule prend généralement moins d'une heure pour les sites à contenu sans intégrations complexes. Search Console et les outils d'analyse sont suivis attentivement pendant les deux premières semaines pour détecter tout problème rapidement.
Calendrier et coût
Une migration typique de Webflow vers Next.js prend 2 à 4 semaines du démarrage à la mise en ligne. Les sites simples (moins de 20 pages, CMS minimal) peuvent aller plus vite. Les sites complexes avec un CMS intensif, de multiples intégrations ou des fonctionnalités personnalisées prennent plus de temps.
| Complexité du site | Calendrier | Investissement typique |
|---|---|---|
| Simple (5-15 pages, sans CMS) | 1-2 semaines | 2 000 €-4 000 € |
| Moyen (15-50 pages, collections CMS) | 2-3 semaines | 4 000 €-8 000 € |
| Complexe (50+ pages, intégrations, i18n) | 3-5 semaines | 8 000 €-15 000 € |
Ce qui change pour votre équipe
Le principal ajustement concerne l'édition du contenu. L'éditeur visuel de Webflow disparaît. Selon la configuration choisie, les modifications de contenu se font via un tableau de bord CMS headless ou via un service d'édition géré où vous envoyez les changements par e-mail et où ils sont mis en ligne sous 24 à 48 heures.
Tout le reste s'améliore. Le site est plus rapide, plus sécurisé et moins coûteux à héberger. Les nouvelles fonctionnalités sont développées en code plutôt qu'assemblées à la hâte avec des blocs intégrés et des outils tiers.
Questions fréquentes
"Vais-je perdre mon positionnement SEO ?" Pas si la migration gère correctement les redirections d'URL et les métadonnées. Un article détaillé traite de ce sujet : en résumé, une migration bien exécutée préserve le positionnement et l'améliore souvent.
"Pourrai-je toujours modifier le contenu moi-même ?" Oui, via un CMS headless ou un service d'édition géré. Le glisser-déposer visuel disparaît, mais la possibilité de modifier les textes, les images et les pages reste entière.
"Et mes animations Webflow ?" Elles sont reconstruites. Framer Motion et GSAP permettent de reproduire tout ce que Webflow Interactions propose, et davantage encore. Les animations sont souvent plus performantes car optimisées pour l'implémentation spécifique du site.
Grille de décision
Calculez vos coûts Webflow actuels : forfait d'hébergement, licences d'espace de travail, dépassements de formulaires, outils tiers et temps développeur pour les contournements. Comparez ce total au coût ponctuel de la migration, plus un hébergement minimal en continu.
De nombreuses entreprises récupèrent le coût de la migration en 6 à 12 mois grâce à la réduction des frais de plateforme et aux gains de conversion ; le délai de retour sur investissement dépend du volume de trafic et des coûts antérieurs. Passé ce délai, les économies s'accumulent tandis que les capacités du site continuent de s'étendre.