Next.js : applications React full stack et SEO
Construire des sites et applications performants avec le rendu côté serveur, le SEO et l’internationalisation.
- Durée
- 14 h · 2 jours
- Niveau
- Intermédiaire
- Format
- Présentiel · Distanciel · Mixte
- Effectif max.
- 12 participants
Présentation
Ce programme montre comment développer avec Next.js : routage par fichiers, composants serveur et client, récupération des données, rendu statique ou dynamique, optimisation du référencement et internationalisation. Les participants construisent un site complet et apprennent à choisir la bonne stratégie de rendu pour chaque page.
À qui s’adresse ce programme
- Développeurs React souhaitant gagner en performance et en référencement
- Développeurs full stack JavaScript
- Équipes qui lancent un site vitrine ou une application avec contenu public
Prérequis
- Bonne connaissance de React et de JavaScript
- Notions de TypeScript appréciées
Objectifs pédagogiques
- Créer un projet Next.js et comprendre son routage
- Choisir entre rendu statique, dynamique et régénération
- Distinguer composants serveur et composants client
- Récupérer des données et créer des routes d’API
- Optimiser le SEO et les performances
- Internationaliser une application
- Tester l’application
Programme détaillé
4 modules · 14 h · 2 jours
Les fondamentaux de Next.js
- Créer un projet et lire sa structure
- Routage par dossiers, layouts et pages
- Composants serveur et composants client
- Navigation et liens
- Fichiers spéciaux : chargement, erreur, introuvable
Construire un site de plusieurs pages avec layout partagé.
Données et rendu
- Récupérer des données côté serveur
- Rendu statique, dynamique et régénération incrémentale
- Cache et revalidation
- Routes d’API et actions serveur
- Découper le code et charger à la demande
Afficher des articles depuis une API avec la bonne stratégie de rendu.
Style, SEO et performances
- CSS Modules et bibliothèques de composants
- Métadonnées dynamiques et balises sociales
- Plan de site, fichier robots et données structurées
- Images, polices et Core Web Vitals
- Mesurer avec Lighthouse
Auditer un site et corriger les métadonnées et les performances.
Internationalisation, tests et déploiement
- Routes localisées et fichiers de traduction
- Tests de composants avec Jest ou Vitest
- Tests de bout en bout
- Variables d’environnement et déploiement
- Bonnes pratiques de production
Ajouter une seconde langue et des tests au site du projet.
Outils et technologies
Méthodes pédagogiques
- Alternance d’exposés courts et de travaux pratiques
- Démonstrations en direct par le formateur
- Projet fil rouge construit au fil des modules
- Corrections collectives et échanges sur les bonnes pratiques
Évaluation
- Exercices pratiques corrigés à chaque module
- Mini-projet réalisé en fin de formation
- Quiz de validation des acquis
Matériel requis
- Un ordinateur avec une connexion internet
- Un éditeur de code et Node.js installés
Ressources fournies
- Support de cours et dépôt d’exercices corrigés
- Aide-mémoire des stratégies de rendu
Débouchés
- Un site Next.js complet et déployable
- Une grille de choix de stratégie de rendu
- Des réflexes d’optimisation SEO
Les cours vidéo associés
Mes cours en vidéo qui accompagnent ce programme : pour préparer la formation ou réviser ensuite. Accès gratuit avec un compte.
