Next.js

Objectifs

- 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

Programme de la formation

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)

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique