Formation Next.js avancé : personnalisation

Description

Cette formation Next.js avancé personnalisation vous permettra de concevoir des expériences web rapides et personnalisées, en combinant rendu statique, rendu serveur et composants client de façon optimale.

Pendant 1 jour, vous apprendrez à :

• Mettre en place des patterns éprouvés (A/B testing, filtres, contenu ciblé) sans sacrifier les performances Core Web Vital
• Choisir entre SSR, SSG, ISR, PPR et composants Server/Client
• Personnaliser via routes dynamiques, searchParams et route handlers
• Mettre en œuvre Partial Prerendering et Segmented Rendering
• Auditer le comportement client/serveur dans les DevTools.

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

Public

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

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

• Avoir une connaissance minimale de Next.js
• 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
• 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.
• 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

Télécharger le programme

Formateur

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1719 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 184 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 13 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux