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

Next.js est le méta framework par excellence pour le développement d’applications web modernes. Reposant sur React, il est l’un des plus utilisé et dispose d’une grande communauté de développeurs. Maintenu par Vercel, Next.js se distingue par ses innovations constantes, apportant régulièrement de nouvelles fonctionnalités notamment en matière de performance et d’expérience de développement.

Next.js propose actuellement deux orientations : Page Router et App Router. Cette formation se concentre sur le App Router, qui est l’approche la plus récente et qui permet d’utiliser les fonctionnalités les plus récentes de React, comme les React Server Component et le Streaming.

Plongez dans l’univers avancé de Next.js avec notre formation de deux journées conçue pour les développeurs frontend ou fullstack JavaScript ayant déjà des bases solides en React. Cette formation vous permettra de découvrir et maîtriser les capacités offertes par les dernières versions du framework.

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