NEXTJS

Next.js

La meilleure formation pour maîtriser le framework Next.js

✓ Formation officielle SFEIR InstituteNiveau Intermédiaire⏱️ 2 jours (14h)

Ce que vous allez apprendre

  • 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

Prérequis

  • 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

Public cible

  • DĂ©veloppeur frontend expĂ©rimentĂ© ou fullstack JavaScript expĂ©rimentĂ© qui a dĂ©jĂ  des connaissances en React et qui souhaite maĂ®triser le framework Next.js

Programme de la Formation

9 modules pour maîtriser les fondamentaux

Sujets abordés

  • →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

Sujets abordés

  • →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

Activités

Arborescence de pages et layouts

Composant Link et hooks du router

Sujets abordés

  • →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

Activités

React Server Components – les bases

Composition et children

Sujets abordés

  • →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

Activités

Chargement côté serveur et gestion du cache

Sujets abordés

  • →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

Activités

Error boundaries dans Next.js

Erreurs 404

Sujets abordés

  • →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 ?

Activités

Server actions

Hooks useOptimistic – useActionState – useFormStatus

Sujets abordés

  • →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

Activités

Règles de réécriture

Système d'authentification basique

Sujets abordés

  • →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)

Activités

Génération statique – generateStaticParams

Route Segment Config

Sujets abordés

  • →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

Activités

Selon la stratégie de déploiement choisie

Processus Qualité

L'engagement de SFEIR Institute : une démarche d'excellence pour garantir la qualité et la réussite de toutes nos formations. En savoir plus sur notre démarche qualité

Méthodes pédagogiques mobilisées
  • Lectures / Apports thĂ©oriques (Slides) — PrĂ©sentation de concepts via des supports visuels (PowerPoint, PDF).
  • DĂ©monstration technique (DĂ©mos) — Le formateur rĂ©alise une manipulation ou une procĂ©dure devant les apprenants.
  • Laboratoires dirigĂ©s (Labs) — Mise en pratique guidĂ©e sur logiciel, machine ou environnement technique.
Dispositif d'évaluation et de suivi

L'atteinte des objectifs de la formation est évaluée à plusieurs niveaux pour garantir la qualité de la prestation :

  • Évaluation continue des acquis : VĂ©rification des connaissances tout au long de la formation via des mĂ©thodes participatives (en fonction de la formation: quiz, exercices pratiques, mises en situation) sous la supervision du formateur.
  • Mesure de la progression : Dispositif d'auto-Ă©valuation comparatif comprenant un diagnostic initial pour situer le niveau de dĂ©part, suivi d'une Ă©valuation finale pour valider l'Ă©volution des compĂ©tences.
  • Évaluation de la qualitĂ© : Questionnaire de satisfaction en fin de session pour mesurer la pertinence et l'efficacitĂ© de la formation ressentie par les participants.

Prochaines sessions

Aucune date ne vous convient ?

Nous organisons régulièrement de nouvelles sessions. Contactez-nous pour connaître les prochaines dates disponibles ou pour organiser une session à la date de votre choix.

S'inscrire à une date personnalisée

1 400€ HT

par apprenant