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
What are the aims of the training?
→ 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.
What do you need to know to follow the training?
Connaissances préalables de Javascript et de React,
expérience avec Node.js et npm
Training programme
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.