Description
Le programme de formation sur Next.js 14 vise à introduire les participants aux concepts clés de ce framework, en mettant l'accent sur ses avantages et son architecture. Les cours couvrent l'installation, la configuration, l'utilisation de TypeScript, le routage, le rendu côté serveur et la génération de sites statiques. Les participants apprendront également à optimiser les performances, à intégrer un ORM comme Prisma, et à sécuriser les applications avec Next Auth et des middlewares. Ce programme s'adresse aux développeurs souhaitant approfondir leurs compétences en développement web moderne avec Next.js.
Objectifs
- Maîtriser les concepts fondamentaux de Next.js
- Développer des applications web performantes et optimisées pour le SEO
- Exploiter les fonctionnalités avancées de Next.js 14, telles que les Server Actions
Récapitulatif
Public
Développeurs web ayant une expérience avec React
Développeurs web souhaitant découvrir Next.js
Prérequis
Notions de base en React
Connaissance du TypeScript (optionnel)
Méthodes et modalités pédagogiques
Formation réalisée en Présentiel, Distanciel ou Dual-Learning selon la formule retenue.
Moyens et supports pédagogiques
Mise à disposition d'un poste de travail sur nos formations en Présentiel.
Mise à disposition de nos environnements de visio sur nos formations en Distanciel
Remise d'une documentation pédagogique numérique pendant la formation
La formation est constituée d'apports théoriques, d'exercices pratiques et de réflexions
Dans le cas d'une formation sur site Entreprise, le client s'engage à avoir toutes les ressources pédagogiques nécessaires (salle, équipements, accès internet, TV ou Paperboard...) au bon déroulement de l'action de formation conformément aux prérequis indiqués dans le programme de formation
Modalités de suivi et d'évaluations
Auto-positionnement des stagiaires avant la formation
Émargement des stagiaires et formateur par 1/2 journée
Exercices de mise en pratique ou quiz de connaissances tout au long de la formation permettant de mesurer la progression des stagiaires
Auto-évaluation des acquis de la formation par les stagiaires
Questionnaire de satisfaction à chaud et à froid à l'issue de la formation
Programme détaillé
Introduction à Next.js 14
- Présentation de Next.js et de ses avantages
- Architecture de Next.js
- Installation et configuration de Next.js
- Structure d'un projet Next.js
Typescript avec Next.js
- Introduction au TypeScript (optionnel)
- Syntaxe de base du TypeScript
- Types et interfaces
- Classes et modules
- Utilisation du TypeScript avec Next.js
App router
- Présentation de l'App Router
- Création et utilisation de l'App Router
- Comparaison entre l'App Router et le Page Router
- Routage avec Next.js
- Routes imbriquées et redirection
- Utilisation de layouts
Rendu côté serveur (SSR)
- Comprendre le Server Side Rendering (SSR)
- Avantages et inconvénients du SSR
- Mise en place du SSR avec Next.js
Génération de sites statiques (SSG)
- Comprendre la Static Site Generation (SSG)
- Avantages et inconvénients de la SSG
- Mise en place de la SSG avec Next.js
Optimisation
- Optimisation des performances de Next.js
- Utilisation de next/font
- Gestion des images
- Utilisation d'un CDN
- Techniques de SEO pour Next.js
- Utilisation d'outils comme Lighthouse
- Quand utiliser le SSR, le SSG
- Gestion des métadonnées
Actions de serveur
- Introduction aux Server Actions
- Création et utilisation de Server Actions
- Avantages et inconvénients des Server Actions
Intégration d'un ORM (Prisma)
- Avantages à l'utilisation d'un ORM
- Installation et configuration de l'ORM
- Définition des modèles de données
- Connexion à la base de données
- Exécution d'opérations CRUD
Sécurité avec Next.js (Next Auth)
- Présentation de Next Auth
- Intégration de Next Auth à votre application
- Configuration des fournisseurs d'authentification (Google, Facebook, etc.)
- Gestion des utilisateurs et des rôles
Sécurité avec Next.js (middlewares)
- Comprendre les middlewares
- Créer et utiliser des middlewares pour sécuriser vos routes et vos API
- Authentification et autorisation avec les middlewares
- Protection contre les attaques CSRF et XSS
Environnement Next.js
- Déploiement avec Vercel
- Edge Runtime (Comprendre les avantages du Edge Runtime, Déployer votre application sur le Edge Runtime, Améliorer la latence et les performances)
- Vercel Functions (Comprendre les avantages des Vercel Functions, Créer et utiliser des Vercel Functions, Déplacer la logique métier vers le Edge)