Grâce à cette formation Next.JS, vous maîtriserez l'ensemble des patterns de programmation qui permettent 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.

Vous apprendrez aussi à éviter les erreurs de type window is not defined ou hydration mismatch qui apparaissent souvent dans Next.js lorsque l'on utilise du code JavaScript spécifique au client ou que l'on importe des librairies telles que Leaflet pour la cartographie et D3 pour la visualisation de données.

Vous découvrirez les concepts de réhydratation (hydration) et de "montage" (mounting) des composants React afin de clarifier les interactions entre le rendu client et le rendu serveur dans Next.js.

Enfin, les React Browser Components vous permettront de mieux identifier les situations où le code spécifique au navigateur nécessite une attention particulière.

Lors de cette journée, vous construirez une application de démonstration qui utilise le code JavaScript client de plusieurs façons:
- visualisation de données,
- utilisation de l'objet window pour le rendu,
- modification impérative du DOM.

Cette formation de niveau intermédiaire s'adresse aux développeurs et développeuses web avec un minimum d'expérience dans le développement d'applications web avec rendu serveur.
Une connaissance des bases de React est nécessaire afin d'écrire du code simple (composants, hooks) ainsi qu'une connaissance minimale de Next.js.
Cette formation présente des concepts qui existent dans tous les frameworks avec rendu serveur, elle est donc ouverte aux développeurs et développeuses utilisant d'autres technologies web (Nuxt, Angular, SvelteKit, Remix, Vite, …).

---

Vous débutez avec Next.js ?

Notre formation Next.js est faite pour vous.

Si au contraire, vous maîtrisez déjà Next.js, devenez un expert dans la personnalisation de vos application Next.js grâce à notre formation Next.js avancé : personnalisation !

Les objectifs

• Comprendre les concepts de mounting et hydration dans React et leur lien avec le code spécifique au navigateur
• Importer une librairie qui ne fonctionne que dans le navigateur (Leaflet pour la cartographie)
• Afficher des informations en utilisant l'objet window
• Utiliser une librairie qui peut être importée côté serveur mais ne peut être utilisée que côté client (D3 pour la visualisation de données)
• Apporter des modifications impératives au DOM dans une callback d'effet
• Gérer le code isomorphique qui est identique mais se comporte différemment côté client et côté serveur

Pré-requis

• Savoir programmer 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
• Ordinateur portable à apporter

Le programme de la formation Next.js avancé: JS client

Matin : Lazy loading et manipulation du DOM

• Importer une librairie uniquement côté client avec next/dynamic (Leaflet pour la cartographie)
• Découverte du principe du lazy loading
• Utiliser une librairie importable côté serveur mais qui ne fonctionne que côté client (D3 pour la visualisation de données)
• Implémenter la modification impérative du DOM compatible avec le rendu serveur via les refs et les effets
• Introduction du concept de Browser Component qu'il faut transformer en Client Component

Mises en pratique :
- Importer et utiliser Leaflet
- Importer et utiliser D3
- Identification des Browser Components

Après-midi : Composants utilitaires et hydration dans React

• Afficher des informations en utilisant l'objet window
• Implémenter et utiliser les utilitaires useMounted et NoSsr
• Découverte des concepts d'hydration et mounting dans React
• Gérer le code isomorphique (localisation)

Mises en pratique :
- Afficher le titre de la page
- Manipuler un composant non modifiable qui utilise l'objet window
- Afficher la date courante via l'objet Date
- Afficher du contenu localisé via les fonctionnalités du navigateur

Le(s) formateur(s)

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...
• 122 formations au catalogue, 1604 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