Formation Next.js : Le framework React pour la production

Programme de la formation
Next.js : Le framework React pour la production

• Introduction à Next.js et configuration de l'environnement

  - Initialiser un projet Next.js.
  - Comprendre la structure de fichiers d'une application Next.js.
  - Configurer les outils de développement (ESLint, Prettier).

• Routage et navigation dans Next.js

  - Implémenter le routage basé sur le système de fichiers.
  - Utiliser le composant `Link` pour la navigation client-side.
  - Créer des routes dynamiques avec des paramètres.

• Data Fetching : SSR et SSG

  - Mettre en œuvre le rendu côté serveur (SSR) avec `getServerSideProps`.
  - Appliquer la génération de site statique (SSG) avec `getStaticProps`.
  - Différencier les cas d'usage de SSR et SSG.

• Data Fetching : ISR et Client-Side

  - Utiliser la régénération statique incrémentale (ISR) avec `revalidate`.
  - Récupérer des données côté client avec `useEffect` et SWR.
  - Combiner les stratégies de Data Fetching.

• Optimisation des performances : Images et Polices

  - Optimiser les images avec le composant `next/image`.
  - Charger des polices de manière performante avec `next/font`.
  - Réduire le Cumulative Layout Shift (CLS).

• Composants Serveur et Client

  - Distinguer les Server Components des Client Components.
  - Définir les limites des Server Components.
  - Utiliser les directives "use client" et "use server".

• Hydratation et rendu progressif

  - Comprendre le processus d'Hydratation.
  - Identifier les problèmes liés à l'Hydratation.
  - Optimiser le rendu progressif des pages.

• API Routes et Middleware

  - Créer des API Routes pour des endpoints backend.
  - Implémenter des Middleware pour la logique de requête.
  - Gérer l'authentification avec des API Routes.

• Gestion des formulaires et validation

  - Construire des formulaires avec React Hook Form.
  - Valider les données côté client et côté serveur.
  - Intégrer des bibliothèques de validation (ex: Zod).

• Gestion de l'état global et Context API

  - Utiliser le Context API pour la gestion d'état.
  - Optimiser les re-renderings avec `useMemo` et `useCallback`.
  - Structurer l'état global d'une application.

• Déploiement et environnement de production

  - Préparer une application Next.js pour la production.
  - Déployer sur des plateformes comme Vercel ou Netlify.
  - Configurer les variables d'environnement.

• Monitoring et débogage en production

  - Mettre en place le monitoring des performances.
  - Utiliser les outils de débogage pour les applications Next.js.
  - Gérer les erreurs et les logs en production.