Next.js
Description
Avec Next.js, framework React, créer et déployer des applications à grande échelle et prêtes pour l'entreprise en production.
Cette formation s'adresse aux développeurs React, développeurs frontend.
Les contenus techniques vus au cours sont:
→ Introduction à Next.js et fondamentaux
→ Server-side rendering et déploiement
Quels sont les buts de la formation ?
→ Comprendre les principes fondamentaux de Next.js
et son rôle dans le développement web.
→ Apprendre à créer des applications web modernes
en utilisant les fonctionnalités avancées de Next.js.
→ Maîtriser le routage et la gestion de l'état côté client
avec Next.js.
→ Comprendre l'utilisation de Server-Side Rendering
(SSR) et d'Incremental Static Regeneration (ISR)
pour des performances optimales.
→ Savoir comment déployer des applications Next.js
sur différents environnements.
Que devez vous connaître pour suivre la formation ?
Connaissances préalables de Javascript et de React,
expérience avec Node.js et npm
Programme de la formation
INTRODUCTION À NEXT.JS ET FONDAMENTAUX
↘ Introduction à Next.js
• Présentation de Next.js et ses
avantages par rapport à la création
d'applications React traditionnelles.
• Configuration de l'environnement de
développement pour Next.js.
• Création d'un nouveau projet Next.js
et structure de base.
↘ Routage avec Next.js
• Utilisation du système de routage
intégré à Next.js.
• Création de pages dynamiques avec
des paramètres de route.
• Routage client-side vs. server-side.
↘ Gestion de l'État dans Next.js
• Utilisation de React Hooks pour gérer
l'état local dans les composants.
• Partage de l'état entre les pages avec
les gestionnaires de contexte.
• Gestion de l'état côté client avec les
API d'initialisation et de récupération
(getServerSideProps, getStaticProps)
SERVER-SIDE RENDERING ET DÉPLOIEMENT
↘ Server-Side Rendering
avec Next.js
• Comprendre le Server-Side Rendering
(SSR) et ses avantages.
• Utilisation de l'API
getServerSideProps pour le rendu
côté serveur.
• Mise en oeuvre de SSR pour
améliorer les performances et le
référencement.
↘ Incremental Static Regeneration (ISR)
• Comprendre l'Incremental Static
Regeneration (ISR) et son utilisation
avec Next.js.
Génération statique des pages
avec ISR pour une mise à jour
incrémentielle.
• Configurer la stratégie de mise en
cache et les délais de régénération.
↘ Déploiement d'une Application Next.js
• Génération de fichiers de production
avec Next.js.
• Hébergement d'une application Next.
js sur différentes plateformes (Vercel,
Netlify, etc.).
• Stratégies de déploiement pour une
mise à jour en douceur.
↘ Exercices pratiques
• Création d'une application multi-pages avec Next.js et navigation entre les pages.
• Gestion de l'état local des composants avec des Hooks.
• Utilisation du contexte pour partager des données entre différentes pages.
• Implémentation de Server-Side Rendering pour les pages les plus critiques
de l'application.
• Utilisation d'Incremental Static Regeneration pour les pages qui nécessitent
des mises à jour fréquentes.
• Déploiement d'une application Next.js sur une plateforme de déploiement en ligne.