Pourquoi j'ai choisi Next.js et Sanity pour mon nouveau blog

Le grand déménagement...

L'une des principales raisons pour lesquelles j'ai toujours aimé faire ce métier est le fait que les technologies évoluent toujours pour le mieux. Ils améliorent constamment les moyens de faire plus avec moins. Et cela se produit encore de nos jours avec les récentes technologies Jamstack telles que React.js, Next.js et Sanity pour n'en nommer que quelques-unes. Je le vois comme une sorte de révolution technologique.

En tant qu'ingénieur logiciel, je dois me tenir au courant des dernières technologies et comme aucun ingénieur logiciel ne sait tout, plus vous en savez, meilleures seront vos applications Web et meilleure sera l'expérience utilisateur. Et c'est la raison principale pour laquelle j'ai décidé d'améliorer mes connaissances et de déplacer mon blog personnel dans le monde Jamstack pour vivre la véritable expérience sur le terrain.

Et c'est aussi la raison pour laquelle j'ai écrit cet article dans l'espoir qu'il puisse aider quiconque souhaite entrer dans le monde Jamstack, en cherchant également à choisir les bonnes technologies dès le début pour créer et faire évoluer votre entreprise en ligne sans avoir à recommencer à partir de zéro. à mesure que la technologie évolue.

Surmonter les défis

Malgré mon immense bagage informatique combiné à mes plus récentes compétences web, ça été tout de même difficile d'y arriver. Mais j'ai finalement réussi et les résultats finaux ont récompensés. La preuve est que j'ai maintenant ce blog qui utilise entièrement les dernières technologies Jamstack donnant de bien meilleurs résultats SEO avec des scores de Lighthouse supérieurs à 90% sur presque toutes les pages.

Mon premier défi a été d'apprendre React développé par Facebook qui nécessitait une toute nouvelle façon de penser lors du développement. En fin de compte, vous devez penser en React. En bref, React est une bibliothèque Javascript qui vous aide à créer des interfaces utilisateur dynamiques.

La principale approche à adopter lors du développement en React est de diviser les éléments de votre application en composants. C'était un peu déroutant au début, spécialement pour un programmeur orienté objet comme moi, mais une fois que vous avez compris l'idée derrière la bibliothèque, le résultat final est un bien meilleur code qui est beaucoup plus facile à maintenir pendant le développement de l'application. Il s'agit d'un énorme gain de productivité pour un développeur.

Mon deuxième défi a été de trouver un environnement-cadre pour créer et héberger mon site Web qui est maintenant une Application Web Progressive (PWA). Il existe de nombreuses solutions disponibles, chacune offrant des avantages différents en fonction de vos besoins.

Après avoir essayé Gatsby, qui est également un excellent framework, je suis passé à Next.js car cela me permet de faire plus avec moins à la fin.

Mon troisième défi a été de trouver un moyen d'héberger et de gérer le contenu de mon blog. Puisque React est utilisé pour gérer uniquement la partie UI (frontend) d'une application Web, vous avez besoin d'une autre technologie pour héberger et gérer votre contenu (backend). C'est ce que j'appelle la pile CMS ou la pile Contenu.

La pile CMS peut être WordPress, Magento, Joomla ou tout autre gestionnaire de contenu que vous préférez. La beauté avec Jamstack est que vous pouvez toujours utiliser n'importe quel système de gestion de contenu (CMS) en arrière-plan et utiliser React en avant-plan comme interface utilisateur pour extraire et transmettre ce contenu à vos visiteurs. L'un des principaux avantages de l'approche par pile est que vous pouvez modifier votre CMS sans avoir à reconstruire votre interface utilisateur à partir de zéro.

Après de nombreuses recherches et expérimentations, j'ai finalement choisi d'utiliser Sanity comme CMS, expliqué plus en détail plus bas dans cet article, pour sa toute nouvelle approche de contenu structuré puissante et flexible utilisant du texte portable, qui, à mon humble avis, va être largement adoptée à l’avenir.

Next.js

En bref, Next.js est un framework qui permet de générer des sites Web modernes à l'aide de React. De plus, il vous permet d'exécuter des fonctions sans serveur, ce qui le rend très utile pour exécuter rapidement des processus en arrière-plan tels que l'authentification et les paiements pour n'en citer que quelques-uns.

J'ai eu un coup de cœur pour la partie production lorsque le moment est venu de publier mon travail en ligne en quelques clics avec la plateforme Vercel qui propose une offre gratuite généreuse pour l'hébergement de votre application web.

Bien sûr, je publierai plus d'informations sur la manière de faire les choses correctement avec Next.js. Une fois que vous aurez compris les dessous du fonctionnement de Next.js, vous ferez des choses incroyables avec peu d'efforts.

Sanity

Sanity.io est un système de gestion de contenu (CMS) indépendant du framework. Ce que je veux dire par là, c'est que je peux connecter d'autres frontends au contenu de mon blog (textes, images, etc.) qui ne reposent plus sur un CMS spécifique car il est enregistré au format JSON qui peut être utilisé par n'importe quel framework d'interface utilisateur compatible API tel que Next.js, Gatsby, Vue.js.

Alors maintenant, je peux changer mon framework frontend sans avoir à reconstruire mon contenu. De plus, je peux basculer mon contenu vers un CDN ou tout autre serveur capable d'héberger et de fournir des fichiers JSON sans avoir à reconstruire mon frontend. Par exemple, je pourrais déplacer mon contenu JSON sur Google Drive.

Sanity.io me permet de travailler avec du contenu structuré. Cela signifie que je peux ajouter plus de types de contenu. Qui sait, je pourrais ajouter mon portfolio, peut-être un podcast, certains produits dont j'ai besoin pour commercialiser ou mes créations musicales personnelles.

En outre, Sanity est livré avec un éditeur de studio qui est entièrement personnalisable pour le faire fonctionner comme vous le souhaitez pour vos besoins spécifiques. Encore une fois, je publierai plus sur la façon dont Sanity et les façons de faire les choses correctement.

Tailwind

Je n'ai jamais été un grand fan des frameworks css en raison du poids supplémentaire ajouté à chaque chargement de page et de la courbe d'apprentissage. La première fois que j'ai expérimenté Tailwind, j'ai aimé l'approche qui consiste à ajouter des classes un peu comme Bootstrap mais je n'ai pas aimé la courbe d'apprentissage et le poids supplémentaire de la première version du framework.

Mais depuis la publication de la plus récente version, j'ai changé d'avis. Maintenant nous parlons de quelque chose d'intéressant. En effet, depuis la version 2 de Tailwind, seuls les styles utilisés dans la page Web sont chargés. Ce qui signifie une empreinte beaucoup plus légère concernant le css.

Le mot de la fin

Qui aurait pu dire il y a quelques années que Javascript, qui était utilisé pour faire des calculs de base et des animations dans les pages Web, deviendrait l'un des principaux langages utilisés pour créer des applications Web. À mon humble avis, avec la popularité croissante de React, Javascript va devenir le langage de programmation le plus populaire sur le Web.

La page Web statique classique composée principalement d'html et de css, générée dynamiquement côté serveur à l'aide d'une architecture de serveur monolithique est en train de mourir. De nos jours, nous parlons d'applications Web côté client alimentées dans le monde entier sur des centaines de serveurs CDN. Ce qui rend vos applications web plus fiables, moins chères à héberger mais surtout beaucoup plus sécures.

À mon humble avis, la meilleure approche à utiliser est de créer un produit minimum viable (MVP) comme ce blog, en utilisant la méthode LEAN. C'est-à-dire que même s'il ne contient pas toutes les fonctionnalités que j'aimerais avoir pour le moment, j'ai intégré les éléments minimaux tels que Google Analytics, Opengraph, les métadonnées et les images responsives, pour me permettre de créer du contenu sur un plateforme évolutive adaptée aux exigences technologiques actuelles.

Mais surtout, l'objectif principal est de créer la meilleure expérience Web possible pour l'utilisateur mobile qui consomme désormais notre contenu en utilisant n'importe quel type d'appareil depuis n'importe où.

Au fil du temps, j'ajouterai de nouvelles fonctionnalités telles que l'authentification pour accéder au contenu exclusif, l'abonnement à la newsletter et l'internationalisation (i18n) que j'ai appris récemment et que j'ai mis un certain temps à maîtriser, en particulier les traductions anglais / français avec le routage React qui n'est pas prêt à l'emploi mais suffisamment mature pour être mis en production.

Maintenant que j'ai exploré et trouvé les bons cadres, construisons un excellent contenu pour faire de ce blog ma propre place particulière sur Internet.

Mon prochain objectif est d'intégrer une Newsletter, alors revenez souvent.

À bientôt !