Next.js + vidéo, YouTube

•

Je vois que NextJS est compliqué à appréhender On ne comprend pas sont utilité et fonctionnement ! Le meilleur moyen d'apprendre est par la pratique et des exemples ! Nouvelle vidéo pour créer son blog avec NextJS + MDX en React ! youtu.be/r1CHyYX9ZqY + THREAD sur Next

Next est un framework *fullstack*. Il gère le côté serveur comme le côté client. En clair c'est PHP :troll: En PHP, Flask ruby tu peux faire des template file. Où tu vas pre-fetch les articles de blog, par exemple, et les afficher.

Voici un exemple avec PHP. Dans le fichier HTML tu peux faire du PHP qui sera exécuté côté serveur. Bah en Next c'est pareil. Tu vas pouvoir passer des props à tes composants qui seront récupérées côté serveur. C'est du SSR.

En plus, Next va « build » tes fichiers React en fichier HTML afin que le client puisse instantanément afficher la page. Prenons un exemple : CRA (SPA) : melvynx.github.io/ NextJS (SSR) : codelynx.dev Je fais la démo en vidéo :

Va sur chacun de ces sites web et inspecte le réseau Dans le réseau, clique sur le premier appel de type HTML Tu vois à gauche avec SSR que le fichier HTML contient déjà toutes les balises. Évidemment dans preview il n'y a pas les styles. Alors qu'à droite SPA l'html est vide

Il est vide car tout le code est dans le fichier JavaScript que le navigateur va devoir download. Pourquoi ? Car Next va coté serveur pre-render nos pages avec React afin d'avoir le résultat final, et c'est ça qu'il va envoyer.

Évidemment, c'est loin d'être la dernière feature de NextJS. Vu que c'est côté serveur, il peut aussi avoir des routes API. Donc tout simplement avoir ton backend qui call la DB directement dans Next.

Pour la création d'un blog il va lire tes fichiers locale et crée les fichiers HTML pour chacun de tes articles en MDX. C'est ce que j'explique dans cette vidéo que tu peux aller regarder ! youtu.be/r1CHyYX9ZqY Les explications à l'écrit sont quand même complexes !

Ce dont je ne parle pas dans la vidéo c'est `getServerSideProps` qui va faire un fetch des données côté serveur à chaque request. Si tu as des données régulièrement actualisées et que tu souhaite les avoir à jours tu va devoir utiliser ceci.

Quand tu utilise `getStaticProps` il va faire le fetch lors du build puis il vas pre-render la page et c'est fini ! La différence avec un PHP like c'est que c'est du React. Donc, tu code ton composant comme si de rien n'était, il prend juste des props quoi, normal.

J'en reparlerai prochainement ! En attendant follow @melvynxdev, je fais un post par jour ❤️