Formation Next.js

Apprenez à créer des applications web full-stack et des outils SaaS modernes avec Next.js, le framework pour React et Node.js !

Prix (Formation inter-entreprise)

1800€ HT / personne

Durée

3 jours

Dates

Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)

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.

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 de React et du développement HTML/CSS/JavaScript : savoir créer une page web simple
  • 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 :

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
- Récupérer à la requête la quantité disponible pour les autres produits sur la page générique
- Quiz bilan : SSR, SSG, CSR, quand utiliser quel pattern
- Un middleware basique : loguer l'IP
- Bonus si le temps le permet : 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

Télécharger le programme

Le(s) formateur(s)

Eric Burel

Eric Burel

Eric est ingénieur diplômé de l'ENSIMAG et vit à Montpellier. Développeur et consultant indépendant au sein de sa société LBKE, il a participé à l'émergence de plusieurs startups technologiques.

Son dernier projet en date: architecturer et développer avec Next.js l'interface de l'application SaaS "Aptimize" d'Aplines, une startup de Schneider Electric.

Eric est investi dans le monde de l'open source, en tant que mainteneur du framework Vulcan. Son but est de démocratiser les technologies web les plus récentes : Next.js, GraphQL, React... Il a même reçu le fameux mug Next.js pour son engagement au sein de la communauté !

Il a formalisé et rendu public un pattern de programmation innovant pour la Jamstack, le "rendu segmenté", qui réduit la consommation des applications web et qu'il sera ravi de vous présenter au cours des formations.

Depuis 2020, Eric donne le cours d'introduction au développement web aux élèves-ingénieurs de l'EPF Montpellier.

Il partage régulièrement ses connaissances sous la forme d'articles, au sein de la publication en français PointJS ou en anglais sur le blog du projet Vulcan.

Retrouvez Eric sur GitHub, Medium ou encore Twitter.

Voir son profil détaillé

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...
  • 92 formations au catalogue, 1137 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

Besoin d'aide ?

Vous souhaitez discuter avec nous à propos de votre projet de formation ?
Vous voulez plus d'information sur une formation ou notre fonctionnement ?


Rappel Email

Nos forces

  • Des formations à taille humaine
  • Des formateurs passionnés
  • Des véritables workshop
Accéder au Manifeste

Nos clients

Alcatel
La Poste
Moody's Analytics
Boursorama
Ministère de la Justice
Axa

Formation Next.js

Apprenez à créer des applications web full-stack et des outils SaaS modernes avec Next.js, le framework pour React et Node.js !

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.

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 de React et du développement HTML/CSS/JavaScript : savoir créer une page web simple
  • 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 :

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
- Récupérer à la requête la quantité disponible pour les autres produits sur la page générique
- Quiz bilan : SSR, SSG, CSR, quand utiliser quel pattern
- Un middleware basique : loguer l'IP
- Bonus si le temps le permet : 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

Télécharger le programme

Le(s) formateur(s)

Eric Burel

Eric Burel

Eric est ingénieur diplômé de l'ENSIMAG et vit à Montpellier. Développeur et consultant indépendant au sein de sa société LBKE, il a participé à l'émergence de plusieurs startups technologiques.

Son dernier projet en date: architecturer et développer avec Next.js l'interface de l'application SaaS "Aptimize" d'Aplines, une startup de Schneider Electric.

Eric est investi dans le monde de l'open source, en tant que mainteneur du framework Vulcan. Son but est de démocratiser les technologies web les plus récentes : Next.js, GraphQL, React... Il a même reçu le fameux mug Next.js pour son engagement au sein de la communauté !

Il a formalisé et rendu public un pattern de programmation innovant pour la Jamstack, le "rendu segmenté", qui réduit la consommation des applications web et qu'il sera ravi de vous présenter au cours des formations.

Depuis 2020, Eric donne le cours d'introduction au développement web aux élèves-ingénieurs de l'EPF Montpellier.

Il partage régulièrement ses connaissances sous la forme d'articles, au sein de la publication en français PointJS ou en anglais sur le blog du projet Vulcan.

Retrouvez Eric sur GitHub, Medium ou encore Twitter.

Voir son profil détaillé

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...
  • 92 formations au catalogue, 1137 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

* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012