Formation Next.js

Formation Next.js

Notée : (18)*

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)

1900€ 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 Next.js vous apprendra à 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.

Illustration d'une application NextJS

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

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 : 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 :
    • Découvrir Tailwind,
    • Créer un style global

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
- Découvrir Tailwind, 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, swr...
Le rendu côté serveur : pourquoi, quand et comment
  • Le rendu côté serveur avec React
  • La communication avec les API des données : fetch côté serveur dans les React Server Components
  • Le rendu statique
  • Rendre à la compilation ou rendre pour chaque requête ? Cas d'usages et conséquences pour les performances
  • Revalidation/rendu incrémental pour déferrer les rendus après le build et actualiser régulièrement les pages statiques
  • Bilan : SSR, 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 de la philosophie Jamstack
- 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 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 Route Handlers

Créer une API avec Next.js
  • Implémenter des point d'entrée d'API avec les Route Handlers
  • Gérer les requêtes entrantes avec les Edge Middlewares
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: personnalisation statique par redirection avec les middlewares
  • Finalisation de votre application, discussions autour de vos propres projets

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.

Eric est investi dans le monde de l'open source, en tant que membre du collectif Devographics qui organise les enquêtes annuelles State of JavaScript, State of CSS, HTML, GraphQL et React. Il développe les applications Next.js et Astro de Devographics.

Il a formalisé et rendu public un pattern de programmation innovant pour la Jamstack, le rendu statique personnalisé, 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 sur Smashing Magazine.

Retrouvez Eric sur GitHub, son blog 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...
  • 120 formations au catalogue, 1551 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

2 témoignages

La formation était vraiment très bien. D’abord parce qu’elle est centrée sur l’essentiel : les différents modes et moyens de rendu, les route ...

La formation était vraiment très bien. D’abord parce qu’elle est centrée sur l’essentiel : les différents modes et moyens de rendu, les route handlers. J’ai également apprécié le fait de s’appuyer sur la version beta de la doc et de l’implémentation. Par ailleurs, Eric connais très bien son sujet, bien au delà du nécessaire à la formation, ce qui permet d’avoir une mise en perspective des évolutions. C’est la première fois que je suis une formation ainsi, c’est très intéressant comme approche.

Voir plus

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

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

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

Formation Next.js

Notée : (18)*

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

Formation Next.js

Cette formation Next.js vous apprendra à 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.

Illustration d'une application NextJS

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

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 : 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 :
    • Découvrir Tailwind,
    • Créer un style global

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
- Découvrir Tailwind, 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, swr...
Le rendu côté serveur : pourquoi, quand et comment
  • Le rendu côté serveur avec React
  • La communication avec les API des données : fetch côté serveur dans les React Server Components
  • Le rendu statique
  • Rendre à la compilation ou rendre pour chaque requête ? Cas d'usages et conséquences pour les performances
  • Revalidation/rendu incrémental pour déferrer les rendus après le build et actualiser régulièrement les pages statiques
  • Bilan : SSR, 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 de la philosophie Jamstack
- 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 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 Route Handlers

Créer une API avec Next.js
  • Implémenter des point d'entrée d'API avec les Route Handlers
  • Gérer les requêtes entrantes avec les Edge Middlewares
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: personnalisation statique par redirection avec les middlewares
  • Finalisation de votre application, discussions autour de vos propres projets

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.

Eric est investi dans le monde de l'open source, en tant que membre du collectif Devographics qui organise les enquêtes annuelles State of JavaScript, State of CSS, HTML, GraphQL et React. Il développe les applications Next.js et Astro de Devographics.

Il a formalisé et rendu public un pattern de programmation innovant pour la Jamstack, le rendu statique personnalisé, 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 sur Smashing Magazine.

Retrouvez Eric sur GitHub, son blog 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...
  • 120 formations au catalogue, 1551 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

2 témoignages

La formation était vraiment très bien. D’abord parce qu’elle est centrée sur l’essentiel : les différents modes et moyens de rendu, les route ...

La formation était vraiment très bien. D’abord parce qu’elle est centrée sur l’essentiel : les différents modes et moyens de rendu, les route handlers. J’ai également apprécié le fait de s’appuyer sur la version beta de la doc et de l’implémentation. Par ailleurs, Eric connais très bien son sujet, bien au delà du nécessaire à la formation, ce qui permet d’avoir une mise en perspective des évolutions. C’est la première fois que je suis une formation ainsi, c’est très intéressant comme approche.

Voir plus

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

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

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