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 / Compétences visées

  • 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

Moyens pédagogiques et techniques

  • Formateur validé par nos équipes techniques et pédagogiques
  • Salle de formation informatisée
  • Support de cours numérique

Suivi et appréciation des résultats

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Formulaires d'évaluation
Dernière modification le 16/06/2023