AlanJereb.com
Programmation

Réécriture du blog - migration de Gatsby.js à Next.js

Oct 3rd, 2023

Après une petite pause, je suis ravi de revenir avec un nouvel article de blog. Comme vous l'avez peut-être remarqué, celui-ci diffère des contenus habituels sur les voyages et la photographie. Grâce à la suggestion de ma femme, j'ai décidé de diversifier les sujets que je traite ici sur le blog. Mon blog, mes règles.

Dans l'article d'aujourd'hui, je vais vous présenter quelques modifications récentes que j'ai apportées au blog.

Au revoir à Gatsby.js, bonjour Next.js

Au revoir à Gatsby.js, bonjour Next.js

En coulisses, j'ai donné un relooking complet au blog. J'ai dit au revoir à Gatsby.js et accueilli le Next.js à la pointe de la technologie. De plus, j'ai changé le système de gestion de contenu (CMS) de Contentful au CMS Sanity, hautement flexible.

Je ne vais pas vous ennuyer avec les détails techniques de ces transitions, car il y a beaucoup de contenu disponible à ce sujet. Cependant, si vous avez des questions sur la migration de Gatsby.js à Next.js ou sur le passage de Contentful à Sanity, n'hésitez pas à me contacter sur Twitter, et je ferai de mon mieux pour vous aider.

Maintenant, plongeons dans les changements.

Changements en backend:

  • Webhook de révalidation de Sanity : J'ai configuré un webhook de révalidation de Sanity pour m'assurer que le cache soit automatiquement actualisé après la publication de nouveaux contenus.
  • Traductions : J'ai ajouté des clés pour prendre en charge la langue anglaise.
  • Duplication de la base de données : J'ai ajouté une fonctionnalité pour dupliquer la base de données de production vers mon environnement de développement, de manière à travailler toujours avec une copie fraîche du site pendant le développement.
Migration de la base de données du studio Sanity de production à développement et inversemen

Migration de la base de données du studio Sanity de production à développement et inversemen

  • Magie Côté Serveur : J'ai profité des capacités de rendu côté serveur de Next.js pour améliorer les performances, en déplaçant de nombreux composants vers le SSR pour une expérience plus rapide.
  • Mise à jour du Schéma de la Base de Données : J'ai mis à jour les schémas pour prendre en charge les étiquettes et les mots-clés.

Changements en frontend:

  • Bouton de Retour en Haut : J'ai corrigé un bogue qui causait l'affichage incorrect du bouton de retour en haut sur les écrans plus petits.
  • Couleurs d'Accent : J'ai ajusté les couleurs d'accent pour une meilleure lisibilité sur fond blanc.
Trois nouvelles couleurs pour les liens

Trois nouvelles couleurs pour les liens

  • Clés Prévisibles: J'ai remplacé l'utilisation de math.random() dans les composants JSX par des clés plus prévisibles et cohérentes.
Exemple de changements

Exemple de changements

  • Améliorations CSS : Nous avons résolu divers problèmes liés au CSS et apporté des optimisations de performance.
  • Révision de la Lightbox : Nous avons amélioré la méthode de rendu de la lightbox pour nous assurer qu'elle ne se casse pas même si les ressources externes échouent à se charger.

À venir:

  • Filtrage par balises de catégorie : Bientôt, vous pourrez filtrer le contenu par balises de catégorie. | Implémenté - 2023.10.25
  • Pagination : Je travaille actuellement sur la mise en place de la pagination pour une expérience de navigation plus fluide.
  • Nouvelles langues : Dans les tuyaux, des traductions en espagnol, en français et en italien pour rendre le contenu plus accessible à un public plus large. | Implémenté - 2023.10.24
  • Adieu à Social Beaver : Le projet Social Beaver va disparaître, et son lien sera remplacé par une publication détaillée de description du projet. | Implémenté - 2024.04.22
  • Filtrage des articles liés : Cette fonctionnalité ne montrera que les articles avec des balises liées lorsque davantage de contenu sera disponible sur le blog.

Restez à l'écoute pour ces développements passionnants, et, comme toujours, merci de faire partie de ce voyage.