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 y apprendrez à créer des applications web modernes et performantes avec Next.js.

Nous découvrirons comment créer des pages web avec une interface graphique interactive, mais aussi des API qui fournissent des données aux sites web.

Nous explorerons les concepts avancés qui font de Next.js un framework très puissant: développement full-stack, architecture serverless, Jamstack, rendu serveur et statique.

A l'issue de la formation, vous saurez créer un site web full-stack de bout en bout avec Next.js.

Vous saurez aussi mobiliser les fonctionnalités complexes propres à Next.js pour optimiser vos applications.

Vous pourrez exploiter ces connaissances sur de nombreux cas d'usage, du site vitrine d'entreprise jusqu'au e-commerce avec des millions de produits en passant par les logiciels en mode "SaaS".

Le projet fil rouge consiste à créer individuellement un site e-commerce dont les performances sont optimales, et une API pour l'alimenter en données.

Vous repartirez avec l'ensemble des supports de cours et l'application que vous allez créer durant la formation.

Nous utiliserons la version la plus récente possible de Next (utilisant notamment le dossier "app")

Covid-19: Nous restons ouverts. Cette formation est disponible à distance.
🇺🇸 This training is also available in English

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 : la bibliothèque d'exemples, les discussions GitHub, le Discord

Coder une interface simple avec plusieurs pages

• Le routeur fondé sur les fichiers
• Le composant Link et "next/router"
• Des layouts avec Next.js : root layout et nested layout

Styler une application Next.js

• Le composant Image de Next.js
• Styler une application Next.js :
  • Importer bootstrap,
  • Créer un style global,
  • Utiliser styled-jsx

Mise en pratique :
- Découverte du Discord de Next.js
- 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 avec swr
- Ajouter une image optimisée par Next.js pour les pages produits
- Installer Bootstrap UI, 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 : les APIs, et le pré-rendu
• Rappel sur le rendu et la consommation de données côté client dans React : fetch, useEffect, react-query, swr...

Le rendu côté serveur : pourquoi, quand et comment

• Le rendu côté serveur avec React
• Consommer des query params : un mot sur la réhydratation et le paramètre "isReady"
• La communication avec les API des données : fetch côté serveur dans getServerSideProps
• Le rendu statique avec getStaticPaths et getStaticProps
• Rendre à la compilation ou rendre pour chaque requête ? Cas d'usages et conséquences pour les performances
• ISR pour déferrer les rendus après le build et actualiser régulièrement les pages statiques
• Bilan : SSR, ISR, SSG, CSR, comment choisir ?

Rendu statique avancé pour des sites personnalisés

• Les middlewares pour les pages
• Personnalisation statique avec un middleware

Mise en pratique :
- Découverte du site Jamstack.org
- 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 l'ISR pour actualiser tous les jours automatiquement la page du produit phare
- Mettre en place le rendu serveur (SSR ou SSG) sur la page produit générique
- Quiz bilan : SSR, SSG, CSR, quand utiliser quel pattern
- Un middleware basique : loguer des informations sur la requête
- Bonus si le temps le permet : mettre en place un "feature flag" ; mettre en place un test A/B statique à l'aide d'un paramètre de route, d'une réécriture d'URL et d'un middleware

Jour 3 : Next.js full-stack avec les API routes

Créer une API avec Next.js

• Implémenter des routes d'API avec Next.js, via next-connect, le petit cousin d'Express
• Partager la logique entre une route d'API et les méthodes de data fetching

Comprendre l'architecture Serverless

• Retour sur le routeur par fichiers: code-splitting des pages et principe du serverless
• Connecter une base de données en serverless
• Limites du serverless, et alternatives possibles: serveur satellite, GitHub Actions, scripts au démarrage

Ouverture : l'avenir de Next.js et de React

• Ouverture: - Découverte du starter open source Next Commerce
• Ouverture : les composants serveur et la réhydratation
• Ouverture : découvertes de middlewares avancés: Edge Handlers par Vercel

Mise en pratique :
- Créer une page de pré-commande avec un formulaire pour l'email
- Appeler l'API côté client, avec fetch, pour soumettre le formulaire
- Créer une route d'API pour enregistrer les pré-commandes
- Réutiliser la même connexion pour chaque appel, en serverless
- Créer une route d'API pour afficher le nombre de pré-commandes en cours
- Récupérer le nombre de pré-commandes lors du rendu côté serveur
- Quiz sur le serverless : quels avantages sur le "long running", ce qui est possible, ce qui ne l'est pas

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...
• 82 formations au catalogue, 1275 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