Cette formation Next.js vous apprendra à concevoir des applications web modernes et performantes, en exploitant pleinement les avantages de ce framework puissant.

Vous apprendrez à créer des interfaces interactives et des API robustes tout en découvrant les concepts avancés comme le rendu serveur, le rendu statique, Jamstack, et l'architecture serverless.

À travers un projet pratique, vous développerez un site e-commerce performant, alimenté par une API conçue avec Next.js.

Grâce à cette formation Next.js, vous maîtriserez la création d'applications web full-stack, optimisées pour les performances et adaptées à divers cas d’usage, allant des sites vitrines aux plateformes e-commerce complexes.

Nous utiliserons la version la plus récente possible de Next ("App Router")

Cette formation s'adresse à des développeurs et développeuses, ayant des connaissances de base en développement web React (HTML/CSS/JS pour l'interface) et Node.js, et qui souhaitent approfondir leurs compétences de développeurs full-stack grâce à Next.js.

---

Vous êtes déjà à l'aise avec les bases de Next.js ?

La formation Next.js avancé: JS client vous permettra de gérer du code spécifique au navigateur dans Next.js sans interférer avec le mécanisme de pré-rendu côté serveur.

Si vous souhaitez maîtriser la personnalisation de vos application Next.js rendez-vous sur la formation Next.js avancé : personnalisation !

Les objectifs

• Créer un site web multi-pages avec Next.js
• Créer un point d'entrée d'API avec Next.js
• Créer une page dynamique avec un paramètre de route
• Maîtriser les fonctionnalités de rendu client, rendu serveur et rendu statique de Next pour optimiser les performances d'un site
• Maîtriser les fonctionnalités de création d'API de Next.js, et connaître leurs particularités

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

Jour 1 : Découverte de Next

• 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 : Consommer des données avec la Jamstack

• 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
    • 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 : Next.js full-stack avec les Route Handlers et les Server Actions

• 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

Le(s) formateur(s)

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

• une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• de nombreux clients qui nous font confiance depuis des années
• un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
• 129 formations au catalogue, 1616 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
• la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation