Cette formation Next.js vous permettra de concevoir des architectures web optimisées avec Next.js. Vous pourrez ainsi créer des application proposant des expériences utilisateurs personnalisées.

Cette formation vous permettra de comprendre les outils fournis par Next.js :
- 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.

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...).

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 gestion du code spécifique au navigateur dans Next.js grâce à notre formation Next.js avancé: JS client !

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.

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, HTML, GraphQL et React. Il développe les applications Next.js et Astro de Devographics.

Il a formalisé et rendu public un pattern de programmation innovant pour la Jamstack, le rendu statique personnalisé, 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 sur Smashing Magazine.

Retrouvez Eric sur GitHub, son blog 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...
• 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