Descriptif
Next.js : applications React full stack est une formation de 3 jours (21 heures), de niveau expert, rattachée au domaine « Développement logiciel, informatique et Web ». Développer des applications full stack avec Next.js. Conçue et animée par des praticiens en activité, elle alterne apports ciblés (30 %) et mises en pratique (70 %) sur des laboratoires cloud individuels, avec des cas inspirés des secteurs banque, assurance et services publics. Disponible en inter-entreprises, en intra sur catalogue et en version sur mesure adaptée au contexte de l'entreprise.
Objectifs pédagogiques
À l'issue de la formation, le participant sera capable de :
- Routage
- Rendu serveur
- Données
- API
- Déploiement
Programme détaillé
| N° | Contenus et activités | Durée |
|---|---|---|
| Jour 1 | ||
| 1 | Tour de table expert : applications React en production, contraintes de rendu et de référencement, et ouverture de l'environnement de développement en ligne — Node.js et Next.js préinstallés, exécution dans le navigateur | 0,5 h |
| 2 | Modèles de rendu et arbitrages : composants serveur et composants client, rendu statique, régénération incrémentale, rendu dynamique, streaming et Suspense — quand choisir quoi et à quel coût | 2 h |
| 3 | App Router : arborescence de routes, layouts imbriqués, routes dynamiques, groupes, routes parallèles et interceptées, états de chargement et d'erreur | 1,5 h |
| 4 | Travaux pratiques : poser l'ossature de la plateforme éditoriale fil rouge — layouts, routes dynamiques d'articles, squelettes de chargement diffusés en streaming | 2 h |
| 5 | Atelier : tracer la frontière serveur-client du fil rouge et mesurer son effet sur la charge utile JavaScript envoyée au navigateur | 1 h |
| Jour 2 | ||
| 6 | Accès aux données : récupération dans les composants serveur, cache de requêtes, revalidation par durée et par étiquette, régénération incrémentale | 2 h |
| 7 | Travaux pratiques : brancher la plateforme sur sa source de données, mettre en place la revalidation par étiquette et la purge ciblée après publication | 2 h |
| 8 | Mutations : Server Actions, validation des entrées, transitions et mises à jour optimistes, formulaires fonctionnant sans JavaScript, traitement des erreurs | 1,5 h |
| 9 | Travaux pratiques : coder la publication et la modération d'articles en Server Actions avec mise à jour optimiste et retour d'erreur contextualisé | 1,5 h |
| Jour 3 | ||
| 10 | Route Handlers et intégration : API internes, réception de webhooks, middleware, authentification et session, internationalisation des routes | 1,5 h |
| 11 | Travaux pratiques : exposer une API de recherche et protéger l'espace de rédaction par middleware et session | 1,5 h |
| 12 | Atelier : mesurer la performance et la qualité — optimisation des images et des polices, budgets, signaux Web essentiels, analyse du bundle, tests avec React Testing Library et parcours de bout en bout | 1,5 h |
| 13 | Travaux pratiques : profiler la plateforme, corriger les régressions de performance identifiées et couvrir les parcours critiques par des tests | 2 h |
| 14 | Déploiement et exploitation : cibles de déploiement, environnements et variables, observabilité — restitution des arbitrages d'architecture et plan d'action individuel | 0,5 h |
Méthodes pédagogiques
- Pédagogie active : 55 % du temps en pratique encadrée — laboratoires cloud provisionnés par participant, travaux pratiques guidés, fil rouge applicatif —, le reste en apports structurés, démonstrations commentées, cadrage et évaluation
- répartition calculée sur le déroulé détaillé de cette formation, et non annoncée de façon uniforme
- classe inversée avec prérequis sur le LMS
- apprentissage adaptatif selon le positionnement initial
- travaux en binômes
- classe virtuelle en séquences de 3 h 30 maximum sur Microsoft Teams
- support clair, complet et paginé remis à chaque participant
Technologies et outils mobilisés
Next.js, React, Node.js, React Testing Library
Modalités d'évaluation et de validation
- Positionnement initial en ligne
- quiz de validation à chaque séquence
- évaluation finale des acquis (QCM et mise en situation)
- satisfaction à chaud
- questionnaire de transfert à 30 jours
- attestation de fin de formation
Plateforme, laboratoires et ressources
- LMS DATAROCKSTARS : parcours, supports numériques, quiz, évaluations, émargement par demi-journée
- laboratoires cloud individuels accessibles depuis un navigateur, sans installation, données fictives, détruits en fin de session
- bibliothèque O'Reilly (plus de 60 000 ressources)
- accès aux supports pendant 6 mois