🔍
Formation 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.
Durée
1 jour
Modalités
À distance présentiel possible en intra-entreprise)
Au maximum 6 participants
Prix
Sur devis en intra-entreprise
Prochaines sessions
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
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.
Votre formateur
Eric Burel est ingénieur en informatique et mathématiques appliquées diplômé de l'ENSIMAG. Il est le co-fondateur de LBKE et a contribué à la création de plusieurs startups technologiques.
Eric est actif dans le domaine de l'intelligence artificielle générative en tant qu'ambassadeur IA et membre de la communauté LangChain.
Il contribue aussi à l'open source en tant que membre du collectif Devographics, qui organise les enquêtes annuelles "State of" JavaScript, React et AI.
Contactez-nous
FAQ
-
Pourquoi apprendre le JavaScript client avec Next.js ?
Next.js optimise automatiquement le rendu serveur, mais certaines fonctionnalités nécessitent du JavaScript côté client. Cette formation vous apprend à gérer ces cas spécifiques sans compromettre les performances. -
Quelles sont les erreurs courantes avec le JS client ?
Les erreurs "window is not defined" et "hydration mismatch" sont fréquentes lorsqu'on utilise des bibliothèques comme Leaflet ou D3 qui ne fonctionnent que dans le navigateur. -
Comment financer ma formation ?
LBKE est un organisme de formation certifié Qualiopi, ce qui vous permet de bénéficier d'aides au financement de votre formation. Selon votre profil (salarié, travailleur indépendant ou demandeur d'emploi), différents dispositifs sont mobilisables : nous vous invitons à consulter notre page dédiée au financement des formations. Bien sûr, n'hésitez pas à contacter l'équipe de LBKE afin d'être accompagné dans votre démarche.
Ressources complémentaires
Financer sa formation
LBKE est un organisme de formation certifié Qualiopi, ce qui vous permet de bénéficier de dispositifs de financement... Lire la suite
Choisir sa formation au développement web
Voici quelques critères qui peuvent vous aider à faire un premier choix parmi nos formations Next.js et Astro.js... Lire la suite