De Webflow à Next.js et Sanity.io

Pourquoi migrer de Webflow ?

Webflow est un outil puissant pour créer des sites web "sans coder", mais il présente certaines limites lorsque nos besoins évoluent. De plus, contrairement à ce que l’on pourrait penser, l’outil n’est pas si facile à prendre en main pour une personne non formée, ce qui peut ralentir la mise en œuvre et la gestion des projets.

Les limites de Webflow : Pourquoi chercher ailleurs ?

Performance et optimisation SEO avancées
Bien que Webflow offre des outils d’optimisation, des frameworks comme Next.js permettent un contrôle beaucoup plus précis grâce au rendu côté serveur (SSR) et au rendu statique (SSG). Ces approches améliorent considérablement les temps de chargement et l’expérience utilisateur.
Scalabilité et personnalisation
Les options de personnalisation de Webflow montrent leurs limites face à des besoins complexes, notamment pour des intégrations avancées ou des workflows spécifiques. Notre webmaster a rencontré plusieurs défis à cet égard.
Flexibilité dans la gestion de contenu
La gestion de contenu dans Webflow est intuitive mais peut devenir rigide pour les équipes qui souhaitent collaborer sur des systèmes plus dynamiques et adaptés.

Ces obstacles nous ont conduits à chercher une alternative capable de répondre à nos ambitions : Next.js et Sanity.

Pourquoi Next.js et Sanity.io ?

Next.js est un framework React reconnu pour sa performance et sa flexibilité, tandis que Sanity.io est un CMS headless qui permet une gestion de contenu d’une grande souplesse, tant il est personnalisable facilement mais aussi par sa simplicité d'utilisation. Ensemble, ces technologies offrent :

Un site ultra-rapide grâce à l’utilisation du rendu statique, du rendu erveur (SSR) et de la mise en cache.
Une gestion de contenu sur mesure avec des workflows collaboratifs, des aperçus en temps réel et une personnalisation totale pour répondre aux besoins des équipes.
Un contrôle total sur le code : Contrairement à Webflow, Next.js et Sanity.io offre une liberté totale pour écrire et optimiser le code selon vos besoins spécifiques.

Les étapes clés de la migration

Migrer d’un CMS no-code à une solution technique peut sembler complexe. Voici les étapes que nous avons suivies pour réussir cette transition.

1. Audit du site existant

Nous avons analysé le site Webflow pour identifier les éléments à conserver, optimiser ou supprimer. L’objectif : améliorer les performances, enrichir les contenus et faciliter la maintenance.

2. Conception de l’architecture

Nous avons opté pour une structure hybride : pages statiques pour les contenus fixes et rendu côté serveur pour les pages dynamiques. Grâce à Sanity, nous avons intégré un système de gestion de contenu flexible, incluant des webhooks pour synchroniser automatiquement les données avec la mise en cache.

3. Exportation et transformation des données

Webflow ne dispose pas d’outil direct pour exporter le contenu vers un CMS externe. Nous avons donc utilisé des scripts personnalisés pour exporter les données au format JSON et les importer dans Sanity.

4. Développement avec Next.js

Next.js nous a permis de recréer rapidement l’interface utilisateur tout en améliorant la performance globale grâce à des optimisations comme le lazy loading et la prégénération de pages.

5. Tests et déploiement

Enfin, nous avons effectué plusieurs cycles de tests pour valider la qualité du site (SEO, performance, responsive design) avant de le déployer via Vercel.

Les résultats : Un site transformé

Depuis cette migration, les améliorations sont impressionnantes :

Performances améliorées (métriques du score Lighthouse)
- Avant la migration (Webflow) (source: pagespeed) :
  - Desktop : 96 (performance), 96 (accessibilité), 100 (bonnes pratiques), 100 (SEO).
  - Mobile : 73 (performance), 96 (accessibilité), 93 (bonnes pratiques), 100 (SEO).
- Après la migration (Next.js + Sanity.io) (source: pagespeed) :
  - Desktop : 99 (performance), 100 (accessibilité, bonnes pratiques, SEO).
  - Mobile : 87 (performance), avec un potentiel d’amélioration jusqu’à 96 en ajustant les animations, 100 (accessibilité, bonnes pratiques, SEO).
Une expérience utilisateur optimisée : Les visiteurs peuvent naviguer sur un site plus rapide et fluide.
Une gestion de contenu fluide : Nos équipes peuvent maintenant collaborer facilement, créer de nouveaux contenus et gérer les publications avec efficacité.

Conclusion : Pourquoi passer à une solution plus technique ?

Migrer de Webflow vers une solution combinant Next.js et Sanity.io peut sembler intimidant, mais les résultats en valent largement la peine. Notre site est désormais plus performant, évolutif et adapté à nos ambitions.

Vous envisagez une migration similaire ? Contactez-nous pour discuter de vos besoins et trouver ensemble la solution idéale !