Formation Next.js 16

Description

Cette formation Next.js vous permettra de concevoir des applications web ultra-rapides, modernes et SEO-friendly grâce au framework React le plus complet du moment.

Vous apprendrez à exploiter la puissance du rendu serveur (SSR), du rendu statique (SSG) et des Server Actions pour créer des interfaces réactives et des API performantes, le tout dans une architecture full-stack et serverless.

Pendant 3 jours, vous apprendrez à :

• construire des interfaces React dynamiques avec le nouveau App Router,
• gérer le rendu côté serveur et la génération statique pour optimiser les performances,
• comprendre la génération statique ainsi que le pré-rendu partiel des pages et la gestion des caches
• concevoir et consommer des API serverless avec les Route Handlers,
• intégrer une base de données et automatiser vos déploiements.

À travers un projet e-commerce complet, vous mettrez en pratique tout le workflow Next.js, du design d’interface à la gestion d’API, jusqu’à la mise en ligne.

🇺🇸 Cette formation est aussi disponible en anglais

Public

Cette formation s’adresse aux développeur·euse·s React souhaitant passer au niveau supérieur en devenant full-stack avec Next.js 16.

Formation IA-friendly

Cette formation étant IA friendly, les sessions sont adaptées aux développeur·se·s qui souhaitent utiliser de l'IA pour coder. Les exercices sont conçus pour tirer parti des IDEs agentiques. Le·a formateur·rice vous accompagnera sur les bonnes pratiques du développement assisté par IA.

Ils témoignent

Les objectifs

• Créer un site web multi-pages avec Next.js
• Créer un point d'entrée d'API avec Next.js
• Gérer les données dynamiques et les pages multi-routes
• Utiliser le rendu serveur, le rendu statique et la revalidation pour booster les performances
• Maîtriser les notions de cache, optimisation des performances, pré-rendu partiel.
• Concevoir des API serverless avec les Route Handlers et les Server Actions

Pré-requis

• Maîtriser les bases du développement HTML/CSS/JavaScript : savoir créer une page web simple
• Maîtriser les bases de React : savoir créer un composant interactif, gérer son état, utiliser les "hooks"
• Maîtriser les bases de Node.js et du protocole HTTP : savoir créer une API simple
• Ordinateur portable à apporter

Le programme de la formation Next.js 16

Jour 1 : Plongez dans l’univers de Next.js et créez vos premières pages dynamiques

• Découvrir Next.js
  • De React à Next.js, définition d'un "meta-framework"
  • Cas d'usage de Next.js (sites de contenus à grande échelle, applications SaaS)
  • L’écosystème Next.js (documentations officielles, communauté)
• Coder une interface avec plusieurs pages
  • Le routeur fondé sur les fichiers et les routes dynamiques
  • Le composant Link et "next/router"
  • Des layouts avec Next.js
  • Data fetching côté client
• Styler une application Next.js
  • Styler une application Next.js (découvrir Tailwind, créer un style global)
  • Le composant Image de Next.js

Mises en pratique :

• Découverte des ressources d'apprentissage de Next.js
• Initialiser votre site e-commerce avec la commande Create Next App
• Créer la page d'accueil de votre site e-commerce
• Créer la page de votre produit phare et créer des liens
• Créer un menu de navigation dans le layout
• Créer une page produit dynamique pour les autres produits
• Récupérer des données pour afficher le produit, côté client
• Ajouter une image optimisée par Next.js pour les pages produits
• Modifier le style globalement, et modifier le style d'une seule page

Jour 2 : Maîtrisez le rendu serveur et la Jamstack moderne

• Découvrir la Jamstack
  • 2 principes de la Jamstack (le découplage API, markup, JavaScript / Le pré-rendu)
• Le rendu côté serveur : pourquoi, quand et comment ?
  • Le rendu côté serveur et statique
  • L'affichage de données depuis l'URL
  • Principe de l'hydratation et types de composants React : Client Components, Server Components, "Browser Components"
  • La communication avec les API des données : fetch côté serveur dans les React Server Components
  • Utilisation des cache components et découverte du pré-rendu partiel des pages
  • Revalidation/rendu incrémental (pour déferrer les rendus après le build et pour actualiser régulièrement les pages statiques)
• Les pages dynamiques avec paramètres
  • Rendu serveur (SSR) d'une page dynamique
  • Rendu statique (SSG) d'une page dynamique
  • Bilan sur le rendu serveur, statique, incrémental, avec revalidation, et le principe du moment de rendu

Mises en pratique :

• Retour sur la page des produits génériques et focus sur l'onglet "réseau" des DevTools du navigateur
• Ajouter un query param "referrer" sur la page d'accueil, et l'afficher dans la page
• Générer statiquement la page du produit phare avec des données
• Configurer la revalidation pour actualiser automatiquement la page du produit phare
• Mettre en place le rendu serveur (SSR ou SSG) sur la page produit générique
• Utilisation de données dynamiques (cookies, query param, ...) dans une page avec du contenu statique pour découvrir le pré-rendu partiel

Jour 3 : Passez au full-stack avec Server Actions et Route Handlers

• Comprendre l'architecture Serverless
  • Retour sur le routeur par fichiers (principe du serverless / code-splitting des pages)
  • Connecter une base de données en serverless
  • Limites du serverless, et alternatives possibles
• Créer une API avec Next.js
  • Implémenter des point d'entrée d'API avec les Route Handlers pour traiter un formulaire
  • Principe du Backend For Frontend (BFF)
  • Consommer les données d'une base de données avec un React Server Component
  • Mobiliser les Server Actions pour simplifier la communication frontend/backend
• Finalisation et ouverture
  • Finalisation du projet fil rouge, retour sur les points clés, discussions autour de vos propres projets
  • Ouverture: personnalisation statique par redirection avec le proxy

Mises en pratique :

• Créer une page de pré-commande avec un formulaire pour l'email
• Traiter une précommande avec un point d'entrée d'API (route handler) puis une action (server action)
• Consommer des données dans un Server Component pour afficher le nombre de pré-commandes en cours
• Un proxy basique : loguer des informations sur la requête
• Utiliser les cache components pour gérer l'ensemble des caches de vos composants, pages et données dans votre application

Télécharger le programme

Formations associées

• 

  Next.js avancé: JS client

  1 jour
• 

  Next.js avancé : personnalisation

  1 jour
• 

  C# avec Visual Studio

  5 jours

Formateur

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1848 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 241 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 14 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux