Next.js

- Créer un site web multi-pages avec Next.js - Créer un point d'entrée d'API avec Next.js - Créer une page dynamique avec un paramètre de route - Maîtriser les fonctionnalités de rendu client, rendu serveur et rendu statique de Next pour optimiser les performances d'un site - Maîtriser les fonctionnalités de création d'API de Next.js, et connaître leurs particularités Nos programmes sont très régulièrement mis à jour, vous pouvez consulter la dernière version ici : https://www.humancoders.com/formations/next-js

Jour 1 : Découverte de Next Découvrir Next.js Coder une interface simple avec plusieurs pages Styler une application Next.js Mise en pratique : - Découverte du Discord de Next.js - Découverte des ressources d'apprentissage de Next.js - Initialiser votre site e-commerce avec la commande Create Next App - Créer la page d'accueil de votre site e-commerce - Créer la page de votre produit phare et créer des liens - Créer un menu de navigation dans le layout - Créer une page produit dynamique pour les autres produits - Récupérer des données pour afficher le produit, côté client avec swr - Ajouter une image optimisée par Next.js pour les pages produits - Installer Bootstrap UI, modifier le style globalement, et modifier le style d'une seule page Jour 2 : Consommer des données avec la Jamstack Découvrir la Jamstack Le rendu côté serveur : pourquoi, quand et comment Rendu statique avancé pour des sites personnalisés Mise en pratique : - Découverte du site Jamstack.org - Retour sur la page des produits génériques et focus sur l'onglet "réseau" des DevTools du navigateur - Ajouter un query param "referrer" sur la page d'accueil, et l'afficher dans la page - Générer statiquement la page du produit phare avec des données - Configurer l'ISR pour actualiser tous les jours automatiquement la page du produit phare - Mettre en place le rendu serveur (SSR ou SSG) sur la page produit générique - Quiz bilan : SSR, SSG, CSR, quand utiliser quel pattern - Un middleware basique : loguer des informations sur la requête - Bonus si le temps le permet : mettre en place un "feature flag" ; mettre en place un test A/B statique à l'aide d'un paramètre de route, d'une réécriture d'URL et d'un middleware Jour 3 : Next.js full-stack avec les API routes Créer une API avec Next.js Comprendre l'architecture Serverless Ouverture : l'avenir de Next.js et de React Mise en pratique : - Créer une page de pré-commande avec un formulaire pour l'email - Appeler l'API côté client, avec fetch, pour soumettre le formulaire - Créer une route d'API pour enregistrer les pré-commandes - Réutiliser la même connexion pour chaque appel, en serverless - Créer une route d'API pour afficher le nombre de pré-commandes en cours - Récupérer le nombre de pré-commandes lors du rendu côté serveur - Quiz sur le serverless : quels avantages sur le "long running", ce qui est possible, ce qui ne l'est pas Nos programmes sont très régulièrement mis à jour, vous pouvez consulter la dernière version ici : https://www.humancoders.com/formations/next-js et [https://www.humancoders.com/formations/next-js](https://www.humancoders.com/formations/next-js)

Attestation d'acquis ou de compétences;Attestation de suivi de présence

- Maitriser les bases du developpement HTML/CSS/JavaScript : savoir creer une page web simple. - Maitriser les bases de React : savoir creer un composant interactif, gerer son etat, utiliser les "hooks". - Maitriser les bases de Node.js et du protocole HTTP : savoir creer une API simple. - Ordinateur portable a apporter.