NEXT JS
3 j (21 heures) Ref : NEXT
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)
Moyens pédagogiques
Formation réalisée en présentiel ou à distance selon la formule retenue
Exposés, cas pratiques, synthèse, assistance post-formation pendant trois mois Vidéoprojecteur, support de
cours fourni à chaque stagiaire
Modalités de suivi et d'évaluation
Feuille de présence émargée par demi-journée par les stagiaires et le formateur
Exercices de mise en pratique ou quiz de connaissances tout au long de la formation permettant de mesurer
la progression des stagiaires
Questionnaire d’évaluation de la satisfaction en fin de stage
Auto-évaluation des acquis de la formation par les stagiaires
Attestation de fin de formation
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
Programme détaillé
INTRODUCTION A 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
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
SERVER SIDE RENDERING (SSR)
Comprendre le Server Side Rendering (SSR)
Avantages et inconvénients du SSR
Mise en place du SSR avec Next.js
STATIC SITE GENERATION (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
SERVER ACTIONS
Introduction aux Server Actions
Création et utilisation de Server Actions
Avantages et inconvénients des Server Actions
www.aelion.fr | [email protected] | 05 61 49 42 60 Page 2
NEXT JS
INTEGRATION 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
SECURITE AVEC NEXTJS (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
SECURITE AVEC NEXTJS (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 NEXTJS
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)
CONCLUSION ET QUESTIONS
www.aelion.fr | [email protected] | 05 61 49 42 60 Page 3
