Logo Next.js

Formation Next.js

Next.js est un framework de développement web open source basé sur JavaScript (ou TypeScript) et React. Il permet de structurer son application React et facilite la mise en place du rendu côté serveur (SSR) et de la génération de site statiques (SSG). Dans notre formation Next.js nous verrons comment créer et configurer un projet Next.js, comment fonction le routeur, le rendu côté serveur, la génération de sites statiques, le pré-rendu côté serveur, le code splitting, la gestion optimisée du rendu côté client, le hot reloading, etc... Cette formation Next.js s'adresse aux développeurs ou chefs de projets techniques désireux d'avoir un discours à jour par rapport à l'écosystème React. Une grande part de la formation Next.js est tournée vers la pratique.

Objectifs pédagogiques

  • Comprendre l'architecture de Next.js
  • Créer et configurer un projet Next.js
  • Utiliser le routeur
  • Echanger avec le serveur
  • Optimiser son application web

Pré-requis

  • Maitrise de JavaScript ou TypeScript
  • Connaissance du fonctionnement de React

Public

  • Développeurs
  • Chefs de projets

Programme

Jour 1

Introduction

  • Installation
  • Rappels sur React
  • Structure d'un project Next.js
  • App Router vs Pages Router
  • Server Components vs Client Components

Configuration

  • TypeScript
  • ESLint
  • Variables d'environnement
  • Imports absolus et Aliases de chemin de module
  • MDX
  • Le répertoire src
  • Mode brouillon

Routing

  • Définition des routes
  • Pages et layouts
  • Liens et navigation
  • Groupes de routes
  • Routes dynamiques
  • Chargement et streaming
  • Gestion des erreurs
  • Routage parallèle
  • Intercepteurs de routes
  • Gestionnaires de routes
  • Middlewares
  • Organisation du projet
  • Internationalisation

Jour 2

Rendering

  • Static et Dynamic
  • Platerformes Edge et Node.js

Echanges serveur

  • * Récupération des données
  • Mise en cache
  • Invalidation
  • Actions serveur

Mise en forme

  • CSS Modules
  • Tailwind CSS
  • CSS-in-JS
  • Sass

Jour 3

Optimisation

  • Images
  • Polices
  • Scripts
  • Metadonnées
  • Assets statiques
  • Lazy Loading
  • Analytics
  • OpenTelemetry
  • Instrumentation

Deploiement

  • Exports Statiques
  • Vercel

Méthodes mobilisées

  • Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
  • Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
  • Un support de cours en version numérique sera remis à chaque participant

Modalités d’évaluation

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Auto-positionnement en amont et aval de la formation

Accessibilité aux personnes handicapées

Nous nous engageons à rendre notre formation Next.js accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.
Dernière modification le 16/06/2023