Next.js

• Comprendre les caractéristiques et les patterns de Next.js
• Connaître les différentes méthodes de rendu : SSR, SSG, Partial Prerendering …
• Maîtriser la notion de React Server Component
• Développer une application complète avec Next.js
• Déployer et héberger une application Next.js

Développeur frontend expérimenté ou fullstack JavaScript expérimenté qui a déjà des connaissances en React et qui souhaite maitriser le framework Next.js

• Connaissances de base HTML et CSS
• Avoir suivi la formation Typescript ou avoir des connaissances équivalentes
• Avoir suivi la formation React ou avoir des connaissances équivalentes

Module 1 : Introduction à Next.js

• Introduction à Next.js, ses fonctionnalités clés, les dernières versions.
• Fonctionnalités du framework
• Historique
• La documentation / App Router VS Pages Router : quelle est la différence ?
• Génération d’un projet et arborescence de base
• Découverte de l’application

Module 2 : Le router

• Apprentissage du routage avec Next.js : structuration de l’application et de ses URLs.
• Structuration des pages
• Utilisation des Layouts et des Templates
• URLs dynamiques et matching d’URLs avancé
• Navigation entre les pages
• Les métadonnées

Ateliers :

• Arborescence de pages et layouts
• Composant Link et hooks du router

Module 2 : Les React Server Component

• Pourquoi utilise-t-on les RSC ?
• Présentation technique des RSC – Démystification des concepts
• Quelles implications pour une application React ?
• Guides de migration client component vers server component
• Client boundaries et normes de développement

Ateliers :

• React Server Components – les bases
• Composition et children

Module 3 : Charger de la donnée

• Exploration des stratégies de chargement de données : comment choisir ?
• Chargement de la donnée côté serveur
• Stratégies de cache et revalidation de la donnée
• Route handlers : chargement côté client

Ateliers :

• Chargement côté serveur et gestion du cache
• Route handlers

Module 4 : Gestion des erreurs

• Stratégies pour rendre notre application plus résiliente
• Les error boundaries de React pour gérer les erreurs inattendues au runtime
• Les erreurs 404

Ateliers :

• Error boundaries dans Next.js
• Erreurs 404

Module 5 : Envoyer de la donnée

• Quelles sont les stratégies pour effectuer de la mutation ou de l’envoi de données?
• Les server actions
• Exemples d’utilisation
• Server actions vs route handlers : comment choisir ?

Ateliers :

• Server actions
• Hooks useOptimistic – useActionState – useFormStatus

Module 6 : Middleware et lifecycles

• Utilisation des middlewares pour le routing avancé et l’interception des requêtes.
• Lifecycles d’une application Next.js
• Le fichier de configuration next.config.js
• Le fichier middleware.js

Ateliers :

• Règles de réécriture
• Système d’authentification basique

Module 7 : Les méthodes de rendu

• Comparaison des méthodes de rendu : SSR, SSG, ISR. Choix de la méthode adaptée, pages dynamiques, statiques, et partial pre-rendering.
• Qu’apporte Next.js avec la notion de Streaming ?
• Pages dynamiques
• Le streaming : comment optimiser le chargement avec les suspense boundaries ?
• Pages statiques
• Partial pre-rendering
• Export statique (application complète)

Ateliers :

• Génération statique – generateStaticParams
• Route Segment Config

Module 8 : Déploiement et hébergement

• Passage en revue des différentes stratégies et configurations de déploiement d’une application Next.js
• Export statique
• Vercel
• Process Node.js
• Dockerisation

Ateliers : Selon la stratégie de déploiement choisie