Next.js est un framework JavaScript fondé sur React. Il permet de créer tous types d'applications web de la landing page jusqu'au logiciel SaaS en passant par les applications de contenu : blogs, e-commerce, sites de presse, plateformes d'information, …
​Au sein de Next, tous les composants React sont pré-rendus côté serveur : cela le rend très performant et optimisé pour le SEO et aussi difficile à utiliser dans le cas du code spécifique au navigateur qui ne peut pas fonctionner côté serveur.

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.

Cet enseignement 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, …).

Débutant en Next.js ? Notre formation Next.js est faite pour vous.

Vous découvrirez dans cette formation 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.

Les concepts de réhydratation (hydration) et de "montage" (mounting) des composants React seront abordés afin de clarifier les interactions entre le rendu client et le rendu serveur dans Next.js.
Les "React Browser Components" nous 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, …

Comme tous nos formateurs, Eric Burel est un passionné, en particulier avec Next.js. Lors des cours et des moments d'échanges informels, il prendra le temps de partager son expérience notamment en expliquant le concept de rendu segmenté qu'il a formalisé et qu'il transmet à travers ses cours vidéos entre autres sujets.

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)

Eric BUREL

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.

Retrouvez Eric sur GitHub, Medium ou encore Twitter.

Voir son profil détaillé

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...
• 103 formations au catalogue, 1466 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