Pourquoi ce défi ?
J'adore le principe de NextJS. C'est efficace, l'expérience développeur est très fluide et agréable. La documentation est très bonne. Il y a une bonne communauté. C'est basé sur React qui mène la barque en termes de framework javascript.
Mais j'ai eu plusieurs question de l'ordre de "maintenant que Vue 3 est sorti, est-ce que React risque pas de se faire damer le pion ?" ou "Est-ce que Svelte ce ne serait pas mieux que React ?". Pour chacun de ces frameworks il y a un équivalent de Next : Vue a Nuxt, et Svelte vient de sortir la beta publique de Sveltekit. Et ça se trouve ce sont des solutions plus efficaces & agréables ? Est-ce qu'un jour l'un d'eux va remplacer NextJS dans mon petit coeur ? Qui sait ?
Mais le découvrir demande un temps d'investissement & d'apprentissage, et j'avais pas tellement de projet à mettre en face, parce que j'aime bien apprendre en faisant. Donc j'ai besoin d'avoir un but précis.
Et là je me suis dit : "Et si je faisais un blog francophone ?" J'ai déjà un blog sur Medium, qui a une bonne ergnomie d'écriture, mais qui n'est pas tellement adapté pour un public francophone. NextJS serait un très bon choix technologique pour ce cas d'usage (et j'explique comment faire ici), mais je vois là aussi l'occasion d'apprendre d'autres frameworks, et les tester sur un cas précis. Du coup je me suis donné un défi de créer un blog en Nuxt/Vue et en Sveltekit/Svelte.
Pourquoi un blog ? Pour plusieurs raisons : c'est un cas d'usage "de la vraie vie", qui est à la fois concrêt et tout de même relativement simple (plus simple en tout cas qu'un jeu vidéo ou qu'un site de vente en ligne). Précisons tout de meme tout de suite que je n'ai aucune idée si je vais maintenir le blog en question une fois mon choix fait, c'est un autre débat :D
Comment choisir ?
Dans un blog avec un framework de type NextJS, je voudrais pouvoir :
- avoir du contenu dynamique : écrire des articles en markdown, les lister automatiquement dans une page index et les injecter dans une page blog générique
- générer des pages statique, et les héberger sur S3, et s'il y a besoin de logique serveur fonctionner en serverless
- utiliser Tailwind, qui est mon framework CSS préféré en ce moment
- inclure des videos YouTube
- afficher du code, évidemment, il faut pouvoir faire un...
console.log('hello world');
Idéalement j'aimerais pouvoir en profiter pour mieux comprendre un framework que je ne connais pas encore. A première vue j'ai deux choix, qui sont des équivalents de Next: Nuxt.JS, sur la base de Vue 3, ou Sveltekit, sur la base de Svelte.
J'ai donc suivi les guides de démarrage de ces deux framework pour (éventuellement) en choisir un.
Avec bien sur l'option de rester sur NextJS si aucun des deux ne me convainc, évidemment !
Mes critères de choix prendront principalement en compte :
- la facilité d'apprentissage et d'arriver à mes fins
- la documentation
- le "DX", c'est-à-dire l'expérience développeur
- l'originalité et la logique du framework
Du peu que j'en ai lu, Vue a été crée par un certain Evan You qui avait travaillé sur Angular JS. Même si Angular 2+ n'a pas grand chose à voir avec Angular JS, j'ai l'impression à première vue que Svelte utilise des concepts complètement différents de ce que je connais déjà (à savoir React et Angular, côté framework côté client), donc je vais commencer avec Svelte et Sveltekit
(Ah oui, petit détail, au cas où ce ne serait pas évident : j'utilise cet article - pendant que je suis en train de l'écrire en Markdown - comme contenu initial pour tester les trois systèmes de blog).
Du coup dans l'ordre nous allons voir :
- Comment mettre en place un blog sous NextJS et, en prime comment faire en NextJS un effet de zoom & déblur sur l'image principale comme ce que fait Medium.
- Ce qu'est Svelte et comment ça marche
- Comment (je m'en sors quand j'essaie de) créer un blog avec Sveltekit & Tailwind
- Ce que sont Vue & Nuxt, et comment ils marchent
- Comment on peut créer un blog avec Nuxt & Tailwind
- Ce qu'on peut dire des points communs et des différences entre Sveltekit, Nuxt et Next pour en tirer nos conclusions
Su ce c'est parti pour la première partie, comment mettre en place un blog sous NextJS
Top comments (4)
Si tu décides d’aller avec SvelteKit, tu pourrais voir comment j’ai fait pour intégrer Netlify CMS. Évidemment, un CMS n’est pas nécessaire (tu pourrais le créer toi-même), mais je suis moi-même en train de refaire mon site web et j’essaie de rendre certaines composantes réutilisables facilement, alors si ça peut t’être utile, je le laisse ici github.com/jakobbouchard/sveltekit...
Ce n’est certainement pas parfait (et j’essaie de l’améliorer peu à peu), mais je crois que c’est tout de même un bon début.
Pour le moment je suis parti sur un process pre build qui liste les fichiers markdown, ce qui me permet de ne pas avoir de dépendances extérieures :)
Ooh, intéressant! Est-ce que tu vas le mettre sur GitHub lorsque ce sera terminé?
Ca ou au minimum détailler ici comment j’ai fait :)