Faire un blog / portfolio avec Next.js et Strapi

L'API Strapi

Strapi est un CMS headless : tout comme Wordpress ou d'autres CMS traditionnels, on a acces a un dashboard administrateur ou nous pouvons gerer le contenu du site (texte, articles, images etc...). La difference etant que Strapi n'est qu'un backend, et nous devons le lier a un frontend qui communiquera a son API. Cela nous permet d'avoir une interface graphique toute faite pour gerer notre contenu.

Strapi dispose donc d'une API REST a laquelle le frontend Next.js de ce portfolio fait ses requetes pour afficher les differents articles. Les requetes vers Strapi ne sont faites que cote serveur, ce qui est un gain en vitesse et en securite.

SSG avec Next.js

Le but de ce projet etant de faire un portfolio, nous beaucoup de publications seront ajoutees au fil du temps, donc le processus doit etre rapide et efficace. Le site doit egalement etre optimise : on ne veut pas que des requetes API soient faites a chaque visite. C'est la que la SSG (generation statique de site) devient interessante. Strapi nous permet de mettre en place des webhooks qui se declenchent quand du contenu est publie / supprime. Le serveur Next.js peut donc avoir une route qui recoit ces webhooks, pour recompiler les fichiers statiques du contenu qui a change. Par exemple : on modifie une publication, et Strapi envoie une requete POST au serveur Next.js avec les details du contenu modifie. La page de la publication cible est recompilee par Next.js.

Ainsi, a moins que le contenu change, les pages sont toutes des fichiers statiques, ce qui reduit considerablement la charge du serveur et les vitesses de chargement.

Les containers docker

Conteneuriser ses services permet de rendre les environnements de developpement et de deploiement plus stables, car on controle exactement quels paquets sont installes.

Ce projet a des fichiers docker compose pour le developpement et le serveur de production. Strapi, Next.js et la base de donnees ont chacun un container. Cela nous permet de les gerer et de les mettre a jour plus facilement.

Vous pourrez trouver le README du projet avec des instructions d'installations sur mon github.

Ce projet pourrait etre ameliore avec une pipeline de deploiement complete, par exemple avec CodePipeline sur AWS pour compiler les images docker a chaque mise a jour d'une branche github. Cela permettrait de faire de l'integration continue, qui fera peut etre l'objet d'un futur article.