Formation Next.js avancé

Programme de notre formation Next.js avancé

[Jour 1 – Matin]

Architecture avancée avec l’App Router

• Comprendre les usages avancés de l’App Router dans une application Next.js moderne
• Structurer une architecture avec layouts, nested layouts, route groups et loading states
• Différencier précisément les Server Components et Client Components
• Limiter le JavaScript côté client grâce à une composition server-first
• Identifier les erreurs fréquentes : surusage du client, boundaries mal placées, bundles trop lourds
• Atelier pratique : refactoriser une application Next.js pour réduire les Client Components et améliorer la structure App Router

[Jour 1 – Après-midi]

Data fetching, caching et revalidation

• Comprendre les stratégies de data fetching côté serveur avec Next.js
• Maîtriser les mécanismes de caching, cache keys, tags et invalidation
• Mettre en place la revalidation temporelle et événementielle selon les besoins métier
• Choisir entre rendu statique, dynamique, streaming et données fraîches à la demande
• Identifier les problèmes de données obsolètes, cache incohérent et revalidation trop agressive
• Atelier pratique : mettre en place une stratégie de cache et de revalidation sur plusieurs pages et sources de données

Server Actions, mutations et gestion des formulaires

• Comprendre le rôle des Server Actions pour gérer les mutations côté serveur
• Créer des formulaires robustes avec validation, gestion d’erreurs et feedback utilisateur
• Sécuriser les mutations : validation des entrées, authentification, autorisations et contrôle des données
• Gérer les états optimistes, erreurs serveur, redirections et invalidation du cache après mutation
• Comparer Server Actions, Route Handlers et appels API classiques selon le contexte
• Atelier pratique : implémenter un workflow complet de création, validation, mutation et revalidation de données

[Jour 2 – Matin]

Performance, streaming et optimisation du rendu

• Optimiser les performances avec streaming, Suspense, loading.tsx et rendu progressif
• Analyser les performances avec Core Web Vitals, Lighthouse, bundle analyzer et traces serveur
• Réduire la taille des bundles : imports ciblés, découpage, lazy loading et suppression des dépendances inutiles
• Optimiser les images, fonts, scripts tiers et ressources critiques
• Limiter les waterfalls, appels redondants, re-renders inutiles et goulots d’étranglement serveur
• Atelier pratique : auditer une application Next.js, identifier les ralentissements et appliquer des optimisations mesurables

[Jour 2 – Après-midi]

Sécurité, authentification et architecture production

• Mettre en place une stratégie d’authentification adaptée aux applications Next.js
• Gérer les sessions, cookies, headers, middleware et redirections sécurisées
• Sécuriser les Server Actions, Route Handlers et accès aux données serveur
• Appliquer les bonnes pratiques : CSRF, validation serveur, secrets, variables d’environnement et permissions
• Structurer une application production-ready : séparation des responsabilités, services, repositories et couche domaine
• Atelier pratique : sécuriser une application Next.js avec auth, middleware, validation serveur et protection des actions sensibles

Tests, observabilité et déploiement

• Mettre en place des tests unitaires, tests d’intégration et tests end-to-end adaptés à Next.js
• Tester les Server Components, composants client, Server Actions et parcours critiques
• Configurer l’observabilité avec instrumentation, logs structurés, traces et métriques
• Comprendre l’intérêt d’OpenTelemetry pour suivre les performances et comportements applicatifs
• Préparer le déploiement : variables, environnements, CI/CD, monitoring, rollback et stratégie de release
• Atelier pratique : ajouter tests, instrumentation et checklist de mise en production sur une application Next.js avancée