Next.js est un framework JavaScript fondé sur React. Il permet de créer tous types d'applications web de la landing page au logiciel SaaS en passant par les applications de contenu : blogs, e-commerce, sites de presse, plateformes d'information …
​Next possède une particularité intéressante: il permet de combiner et d'hybrider différentes techniques de rendu (client, statique, dynamique) pour créer des sites personnalisés extrêmement performants.

Cette formation de niveau intermédiaire à avancé s'adresse aux développeurs et développeuses web possédant un minimum d'expérience dans le développement fullstack ou le "backend pour le frontend" (BFF).
Connaître le fonctionnement principal d'une application backend est nécessaire car les patterns architecturaux présentés dans le cours sont assimilables à des mécanismes de mise en cache des requêtes HTTP et de redirection des requêtes.
De plus, vous aurez besoin de connaître les bases de React afin d'écrire du code simple (composants, hooks).
Une connaissance minimale de Next.js suffit. Cette formation présente des concepts architecturaux qui peuvent aussi être implémentés avec d'autres frameworks. Elle est donc ouverte aux développeurs et développeuses utilisant d'autres technologies web (Nuxt, Angular, SvelteKit, Remix, Vite, architecture spécifique avec Node.js...).

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

Cet enseignement a pour objectif de guider les développeurs et développeuses dans la conception d'architectures web optimisées avec Next.js permettant des expériences utilisateurs personnalisées.
Next.js propose différentes techniques d'optimisation adaptées à l'implémentation de chaque type de personnalisation. La liste est longue et les situations réelles peuvent être compliquées.
C'est pourquoi nous vous donnerons le temps de mieux comprendre les outils fournis par Next : React Server Components (RSC), pré-rendu serveur (SSR), pré-rendu partial (PPR), génération statique (SSG), …
Vous découvrirez ensuite toute la puissance du rendu statique qui ne se limite pas aux contenus génériques invariables et permet au contraire de construire des sites personnalisés extrêmement performants et efficaces.

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

• Citer des cas d'usage de personnalisation dans les applications web
• Connaître les différents modes de rendu de Next.js
• Observer le comportement d'une application avec rendu serveur et rendu client
• Maîtriser différents patterns architecturaux permettant d'exploiter les performances optimales du rendu statique tout en autorisant la personnalisation des sites

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
• Comprendre le fonctionnement d'un serveur web pour le frontend: réponse/requête, renvoyer une donnée au format JSON
• Ordinateur portable à apporter

Le programme de la formation Next.js avancé : personnalisation

Matin: Découverte des patterns classiques pour la personnalisation avec Next.js

​
- Découverte des modes de rendu dans Next.js
- Découverte des composants serveurs et client avec le App Router
- Personnaliser le rendu statique avec un paramètre de route dynamique
- Créer un composant client et un point d'entrée d'API (route handler) pour personnaliser des éléments de la page
​
Mises en pratique:
- Créer une page qui par défaut sera un composant serveur rendu à la compilation
- Traduire les pages avec un paramètre d'URL visible
- Afficher le nom de l'utilisateur et/ou la version client avec appel d'API
- Observer le comportement de l'application dans les devtools
​

Après-midi: Patterns avancés de personnalisation Next.js

​
- Intégrer un composant dynamique pour personnaliser des éléments de la page sans JavaScript client grâce au Partial Prerendering (PPR)
- Personnaliser une page avec un paramètre dynamique invisible via une redirection edge (Segmented Rendering)
- Personnalisation temporaire grâce aux searchParams
​
Mises en pratique:
- Afficher le nom de l'utilisateur et/ou la version serveur sans JavaSript et sans API
- Mettre en place un test A/B sans biais
- Créer un filtre sur les produits avec les searchParams

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