Formation Next.js 15

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,
• 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 15.

Ils témoignent

Matthias B. Interforum

Un formateur qui maitrise vraiment son sujet et un bon mix entre théorie et pratique !

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 15

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

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

Mise 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

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
  • Gérer les requêtes entrantes avec les Edge Middlewares
• 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 les middlewares

Mise 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 middleware basique : loguer des informations sur la requête

Télécharger le programme

Formateurs

Antoine BOURIN

Antoine utilise le framework Next.js depuis plus de 5 ans dans le cadre de projet variés : migration de PHP vers Next.js, optimisation de la vitesse de sites e-commerce et optimisation du rendu serveur sur des sites existants, etc.

Antoine est formateur Next.js depuis 2023 et grâce à ses vidéos a accompagné plusieurs centaines d'apprenants !

Il s'attèle à rester continuellement à la pointe grâce à une veille active. Que ce soit via le discord officiel next.js, le suivi des releases ou les tests des nouvelles fonctionnalités sur ses side projects. Antoine saura vous partager les dernières techniques de Next.js !

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1749 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 : 195 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 13 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