Pourquoi j'ai choisi Next.js avec des outils basés sur l'IA pour reconstruire mon site web plutôt que WordPress

Je voulais refondre mon site web en un week-end et j'ai envisagé trois outils possibles : Drupal, WordPress et Next.js. Comme mon site existant était construit sur WordPress, cela semblait être le meilleur choix. Avec WordPress, je n'aurais pas eu besoin de migrer le contenu, mon serveur était déjà configuré et il me suffisait d'appliquer un nouveau thème.

Cependant, j'ai choisi Next.js avec des outils basés sur l'IA pour refondre mon site web. Voici pourquoi.

Le processus de refonte

Une refonte de site web est plus qu'un simple lancement d'une nouvelle version. Le processus dépend de la complexité du projet et des objectifs. Certaines refontes sont des mises à jour simples, tandis que d'autres nécessitent de reconstruire entièrement le site, y compris sa mise en page, son design et ses fonctionnalités.

Les éléments clés d'une refonte peuvent inclure :

• Créer un nouveau design ou améliorer celui existant
• Modifier la mise en page du contenu pour le rendre plus facile à lire et à utiliser
• Améliorer le SEO en rendant le site plus rapide et plus facile à trouver sur les moteurs de recherche
• Ajouter de nouvelles fonctionnalités basées sur les besoins des utilisateurs
• Mettre en place des redirections pour que les anciennes URL fonctionnent toujours et n'affectent pas le classement SEO
• Rendre le site plus accessible et plus rapide pour une meilleure expérience utilisateur
• Migrer le contenu ou restructurer les données si l'on change de plateforme

Mon projet de refonte devait aborder tous ces aspects.

Défis de conception

Je savais que je manquais de compétences en design. Plus important encore, je n'apprécie pas le processus de design. J'ai cherché des thèmes WordPress qui correspondaient à ma vision mais je n'en ai trouvé aucun. Cela signifiait que je devrais créer un thème personnalisé ou des modèles de constructeur de pages si je restais avec WordPress. Le même problème s'appliquait à Drupal car rien ne correspondait à mes besoins.

Comme je ne suis pas designer, j'avais deux options :

• Utiliser un thème existant
• Obtenir de l'aide

J'ai décidé d'utiliser des outils basés sur l'IA pour donner vie à mes idées. Avec quelques invites descriptives, l'IA a créé tous les composants d'interface utilisateur dont j'avais besoin, des menus de navigation aux mises en page de contenu et aux designs réactifs.

Du côté backend (espace d'administration), Drupal et WordPress ne prennent pas encore entièrement en charge les outils basés sur l'IA pour générer des mises en page personnalisées, ou ils ne fonctionnent pas de manière optimale. Les options disponibles nécessitent toujours de se connecter au site et de cliquer à plusieurs reprises sur plusieurs étapes. Cependant, la communauté Drupal fait des progrès significatifs dans ce domaine, et j'ai l'intention d'en parler bientôt.

Pourquoi j'ai choisi Next.js

J'ai écarté WordPress et Drupal car ils nécessitaient trop de travail manuel. Malgré mon expérience avec Drupal, la configuration d'un site avec des modules et des thèmes aurait pris plus de temps que je n'en avais. N'ayant qu'un week-end pour terminer le projet, j'avais besoin d'une solution simple sans complexité inutile.

Au lieu de cela, je me suis tourné vers Next.js avec des outils de développement modernes. Cursor et Windsurf, tous deux des IDE, simplifient la conception de l'interface utilisateur en générant du code structuré et prêt pour la production à partir d'invites simples. Vous pouvez décrire ce que vous voulez en langage clair, comme « créer un menu de navigation réactif avec un logo et des liens », et obtenir instantanément du code déployable. J'utilise ces outils pour des projets personnels et professionnels depuis un certain temps maintenant.

L'une des clés d'un développement efficace basé sur l'IA est la création de bonnes invites. Pour le processus de migration, j'ai fourni les URL de mes pages WordPress existantes et décrit la structure de contenu Next.js souhaitée. Avec ces invites détaillées, Cursor a généré des scripts pour extraire le contenu de mon ancien site et le transformer dans le nouveau format. La même approche a aidé à créer des URL optimisées et des règles de redirection pour maintenir le classement SEO, tout en assurant des métadonnées appropriées et une structure HTML sémantique sur tout le site.

Traditionnellement, vous écririez chaque ligne de code manuellement. Ces IDE génèrent des composants et des pages entiers via des invites simples, en suivant les meilleures pratiques et en maintenant la qualité du code. Le code généré peut être déployé immédiatement sur votre serveur.

Pour rationaliser le processus, j'ai utilisé :

• ChatGPT, Gemini et Claude pour le brainstorming et la création d'invites efficaces
• Cursor et Windsurf pour la génération et la structure du code
• Tailwind CSS pour le style rapide et la conception réactive

Tailwind a permis un style rapide avec des résultats cohérents et optimisés.

En prime, l'hébergement sur le niveau gratuit de Vercel m'économise 5 $ par mois en coûts d'hébergement et élimine des heures passées sur les mises à jour WordPress et la maintenance du serveur chaque mois.

La puissance de l'IA

L'IA nous permet d'accomplir des choses que nous ne pouvions pas faire auparavant, que ce soit par manque d'expertise ou par manque d'intérêt.

Un autre facteur majeur dans ma décision a été la vitesse.

Mon ancien site WordPress n'obtenait que 65 sur PageSpeed Insights pour les appareils mobiles, comme en témoigne un dernier test de performance :

En comparaison :

• Next.js est incroyablement rapide, obtenant 100 sur PageSpeed pour mobile et bureau
• Atteindre cela n'a nécessité que quelques invites bien conçues et quelques minutes

Adopter l'IA tout en conservant le contrôle

L'IA révolutionne le développement logiciel en augmentant considérablement la productivité. Elle permet aux développeurs d'accomplir des tâches qui nécessitaient auparavant des équipes entières ou semblaient hors de portée en raison de contraintes de temps, d'un manque d'expertise ou d'un intérêt limité pour certains aspects du développement.

Cependant, il est crucial de comprendre que l'IA est un assistant puissant, pas un substitut aux connaissances fondamentales et à la pensée critique. Voici quelques aperçus clés que j'ai acquis :

• Apprendre les fondamentaux est plus important que jamais. Vous devez comprendre ce que fait l'IA et pourquoi
• Positionnez-vous comme le conducteur, avec l'IA comme votre assistant gérant les tâches répétitives et manuelles
• Concentrez votre énergie sur les aspects difficiles : comprendre les besoins des utilisateurs, la conception du système, les décisions d'architecture et la résolution de problèmes
• De solides compétences en communication comme l'écoute active sont devenues encore plus cruciales à l'ère de l'IA

La clé est d'adopter l'IA tout en conservant le contrôle de votre processus de développement. Cela signifie examiner attentivement le code généré, comprendre ses implications et s'assurer qu'il correspond aux exigences de votre projet et aux meilleures pratiques.

Dans mon cas, l'IA m'a permis de concrétiser mes idées avec quelques invites bien conçues. Elle m'a aidé à itérer rapidement, à expérimenter et à affiner jusqu'à obtenir un résultat qui me plaisait, le tout à un coût temporel beaucoup plus faible.

Bien que j'aime beaucoup Drupal et WordPress, et qu'ils soient d'excellents outils pour de nombreux cas d'utilisation que je continuerai à utiliser là où ils sont pertinents, le développement basé sur l'IA avec Next.js s'est avéré être la solution parfaite pour ce projet particulier.

Pile technologique

Voici la pile complète que j'ai utilisée pour construire ce site web :