Next.js – Niveau Expert

À l’issue de la formation, les participants seront capables de :

• Structurer une application Next.js selon les meilleures pratiques (App Router, modularisation, performance)
• Maîtriser les Server Components, Server Actions, streaming et ISR avancé
• Mettre en œuvre des techniques d’optimisation du rendu, du chargement et du SEO
• Intégrer l’internationalisation, la gestion d’état et des middlewares avancés
• Déployer une application Next.js optimisée, sécurisée et maintenable

Architecture avancée avec App Router

• App Router vs Pages Router : état de l’art
• Organisation d’un projet en modules, layouts imbriqués, providers globaux
• Optimisation du lazy loading et des bundles
• Gestion multi-domaines, micro-frontends (aperçu)

Server Components & Server Actions

• Approfondissement : composant purement serveur et client hybride
• Server Actions (Next.js 14) : appels directs à des fonctions côté serveur depuis des formulaires
• Sécurité des Server Actions, validation, revalidation automatique

Rendu dynamique et streaming

• Streaming partiel des pages (React Server Components)
• Utilisation de Suspense, loading.tsx et error.tsx
• Incremental Static Regeneration avancé (ISR dynamique, revalidateTag, revalidatePath)
• Détection automatique des chemins statiques et dynamiques

Internationalisation et routing avancé

• next-intl ou i18n natif de Next.js
• Routage conditionnel selon la langue
• Domaine dédié par locale
• Redirections et réécritures dynamiques (next.config.js)

API, middleware et Edge functions

• Création d’API REST et RPC via les routes route.ts
• Middleware Edge : gestion d’authentification, géolocalisation, A/B testing
• Middleware de rewriting conditionnel (edge config, headers dynamiques)
• Introduction à Vercel Edge Runtime

Sécurité et bonnes pratiques

• Authentification sécurisée (JWT, OAuth2, NextAuth.js)
• Server Actions et validation des inputs avec zod
• CSP, headers HTTP sécurisés (helmet, next-secure-headers)
• Sécurisation des endpoints API et rate limiting

Gestion d’état & intégration des outils

• Appel d’API avec SWR ou React Query
• Gestion d’état globale (Zustand, Redux Toolkit, ou Context API optimisé)
• Intégration de CMS headless : Sanity, Strapi, Contentful
• Intégration d'une base de données avec Prisma + PlanetScale ou PostgreSQL

Performances & accessibilité

• Audit Lighthouse, Web Vitals et optimisation des scores
• Optimisation des images, lazy loading et CDN
• Optimisation du temps de TTFB avec le rendu serveur
• Accessibilité : bonnes pratiques ARIA, navigation clavier, focus management

Déploiement et CI/CD

• Environnements de staging / production sur Vercel
• Configuration des variables sécurisées, preview URLs
• Pipeline GitHub Actions, checks automatiques (lint, tests, build)
• Monitoring avec Vercel Analytics, LogRocket ou Sentry

Projet final – Application professionnelle complète

• Développement d’une app complète avec :
• Authentification NextAuth.js
• Pages dynamiques avec Server Components + Server Actions
• CMS intégré (ou base de données Prisma)
• Middleware Edge pour sécurisation
• Déploiement et documentation

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation