🔍
Next.js avancé : JS client
Apprenez en une journée à surmonter les difficultés du JS client et du pré-rendu serveur
A l'issue de cette formation Next.js avancé, vous connaîtrez les patterns de programmation permettant de gérer du code spécifique au navigateur dans Next.js sans perturber le mécanisme de pré-rendu côté serveur.
Plus précisément, ce que vous découvrirez dans cette formation :
- Comment gérer les erreurs "window is not defined" ou "hydration mismatch", fréquentes avec Next.js, qui surviennent lors de l'utilisation de code JavaScript côté client ou lors de l'importation de bibliothèques comme Leaflet pour la cartographie ou D3 pour la visualisation de données ;
- Comment clarifier les interactions entre le rendu client et le rendu serveur grâce au notions de "réhydratation" ("hydration") et de "mounting" ;
- Comment repérer les "React Browser Components", un concept utile pour mieux gérer le JavaScript incompatible avec le serveur.
Un mini-projet vous permettra de mettre en pratique les patterns vus au cours de la formation et d'isoler le JavaScript client de différentes manières.
Objectifs
Cette formation vous aidera à maîtriser parfaitement l'intégration du JavaScript côté client dans Next.js.
- Comprendre les notions de mounting et d'hydratation dans React et leur relation avec le code spécifique au navigateur ;
- Importer une bibliothèque qui fonctionne exclusivement dans le navigateur (comme Leaflet pour la cartographie) ;
-
Afficher des informations en utilisant l'objet
window; - Utiliser une bibliothèque qui peut être importée côté serveur mais ne peut être utilisée que côté client (comme D3 pour la visualisation de données) ;
-
Effectuer des modifications impératives au DOM dans un hook
useEffect; - Gérer le code isomorphique qui est identique mais se comporte différemment côté client et côté serveur.
Prérequis
Cette formation s'adresse à des développeurs web détenant une expérience dans le développement web avec rendu serveur.
- Maîtriser la programmation en JavaScript au quotidien : syntaxe async/await, fonctions, variables, conditions ;
- Avoir déjà créé des composants simples avec React : concepts de hooks, d'état, format JSX, props, émettre des requêtes côté client ;
- Avoir déjà travaillé sur une application fullstack : soit savoir mettre en place un serveur web Node.js qui sert des pages React, soit connaître les bases d'un framework JavaScript avec backend (Next, Nuxt, Angular, Vite, SvelteKit, QuickCity, Remix...) ;
- Connaître les bases de Node.js et son écosystème, notamment savoir installer un package avec NPM ;
- Avoir une maîtrise suffisante de l'anglais pour lire des documentations techniques
- Apporter un ordinateur portable.
Un questionnaire d'auto-évaluation sera envoyé à chaque participant au début de la formation pour nous permettre d'évaluer au mieux son niveau, ses besoins et ses attentes concernant la formation.
Programme de la formation
Nous explorerons au fil de la journée différents patterns de programmation pour manipuler du JavaScript dans le navigateur avec Next.js.
Découvrez une synthèse du contenu de la formation dans notre article gratuit sur FormationNextjs.fr : Éliminez les erreurs "Window is Not Defined" et "Hydration Mismatch" dans Next.js.
Notre approche pédagogique s'appuie sur l'alternance de présentations par le formateur et de mises en pratique accompagnées sur un projet fil rouge. A l'issue de la formation, vous conserverez le code et tous les supports de formation.
Mini-projet : explorez les différentes manières d'utiliser le code JavaScript client !
Au cours de cette formation Next.js avancé, vous développerez une application qui vous permettra d'explorer plusieurs moyens de mobiliser le code Javascript client : visualisation de données, recours à l'objet window pour le rendu, manipulation du DOM.
Durée
1 jour
Modalités
À distance (présentiel possible en intra-entreprise)
Prix
800 € HT par participant ou sur devis en intra-entreprise)
Prochaines sessions
Date à convenir ensemble
Délai : de 15 jours à 2 mois (maximum)
Votre formateur
Eric Burel est ingénieur diplômé de l'ENSIMAG. Il est co-fondateur de LBKE et a contribué à la création de plusieurs startups technologiques.
Eric est impliqué dans l'open source en tant que membre du collectif Devographics, qui organise les enquêtes annuelles State of JavaScript et React. Il développe les applications Next.js et Astro du projet.
Eric est formateur et enseignant freelance depuis 2022.
Il partage régulièrement ses connaissances à travers des articles publiés sur Smashing Magazine, sur son blog et via les cours en ligne NextPatterns et AstroPatterns.