Description
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 !
🇺🇸 Cette formation est aussi disponible en anglais
Ils témoignent
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.
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
Télécharger le programme
Formateur
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.
MC
Marc C.
SNCF Connect & Tech Services
23.01.2024
Merci pour cette formation
MB
Michel B.
REPUBLIQUE ET CANTON DE GENEVE
28.08.2023
Très bonne formation, j'ai apprécié les exercices qui m'ont permis de passer de la théorie à la pratique et d'améliorer mes connaissances
VG
Vincent G.
LEFEBVRE DALLOZ SERVICES
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.
Un formateur qui maitrise vraiment son sujet et un bon mix entre théorie et pratique !
AM
Arthur M.
BOUYGUES TELECOM - Meudon
26.04.2023
Très bonne formation avec Éric sur NextJs, même pour une première édition.
FAQ
Nos formations sont éligibles à plusieurs dispositifs de financement, selon votre situation. Human Coders est certifié
Qualiopi, ce qui permet la prise en charge par des organismes comme
Pôle emploi, votre OPCO ou encore le
CPF (Compte Personnel de Formation) pour certaines formations.
Pour en savoir plus, veuillez consulter notre page : Comment financer votre formation ?
Oui, la formation peut être proposée en présentiel ou en distanciel. Pour les inter-entreprises, les modalités (présentiel ou à distance) sont fonction de la session.
Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)
Les formations se déroulent toujours en petit groupe de 3 à 6 stagiaires. Nous souhaitons que les formateurs et formatrices puissent passer un maximum de temps avec chacun·e.
Voici une journée type :
- 9h : vous êtes accueillis par votre formateur·rice autour d'un petit déjeuner (croissants, pains au chocolat, jus de fruit, thé ou café...)
- 9h30 : la formation commence
- 12h30 : pause de midi. Le·a formateur·rice mangera avec vous. C'est l'occasion d'avoir des discussions plus informelles.
- 14h : reprise de la formation
- 18h : fin de la journée
8 raisons de participer à une formation Human Coders
- Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1664 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 : 172 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
