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")
🇺🇸 Cette formation est aussi disponible en anglais
Un formateur qui maitrise vraiment son sujet et un bon mix entre théorie et pratique !
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
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
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
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 et est expert du framework Next.js.
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 membre du collectif Devographics qui organise les enquêtes annuelles State of JavaScript, State of CSS et State of GraphQL.
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 Smashing Magazine.
Matthias B.
InterforumUn formateur qui maitrise vraiment son sujet et un bon mix entre théorie et pratique !
Vincent G.
LEFEBVRE DALLOZ SERVICESLa 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.
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 :
* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012
