Projets pratiques8 semaines (240 heures)
Formation Next.js Complète
Next.js est le framework React de référence pour la production. Il apporte le rendu côté serveur (SSR), la génération statique (SSG), les API routes, le routing basé sur le fichier et bien plus. Cette formation vous apprend à construire des applications web performantes, SEO-friendly et scalables avec Next.js. Vous partez de zéro jusqu'au déploiement en production avec les bonnes pratiques actuelles.
Public cible
- Développeurs React souhaitant passer à Next.js
- Développeurs fullstack cherchant un framework React production-ready
- Développeurs web souhaitant créer des sites e-commerce ou corporate
- Freelances qui veulent offrir des solutions web complètes à leurs clients
Prérequis
- Bases solides en React (composants, hooks, props, state)
- JavaScript ES6+ maîtrisé
- Notions de base en HTML, CSS et fetch API
- Un ordinateur avec Node.js v18+ installé
Compétences acquises
Maîtriser l'App Router et les conventions de fichiers
Implémenter le Server-Side Rendering (SSR) et le Static Site Generation (SSG)
Créer des API routes pour le backend
Gérer les données avec Server Components et Client Components
Optimiser les performances (Image, Font, Script)
Implémenter l'authentification (NextAuth.js)
Déployer sur Vercel avec configuration production
Intégrer une base de données (Prisma + PostgreSQL)
Programme de la formation
Module 1 — Fondamentaux de Next.js
- Pourquoi Next.js vs React classique
- Installation avec create-next-app
- Structure du projet et convention de fichiers
- App Router : layout, page, loading, error
- Navigation avec le composant Link
- Routing dynamique : [slug], [...slug]
Module 2 — Server Components vs Client Components
- Composants serveur (par défaut) : avantages et cas d'usage
- Directive 'use client' : quand l'utiliser
- Props sérialisables vs actions serveur
- Server Actions pour les formulaires
- Streaming et Suspense
- Données côté serveur : fetch dans les composants
Module 3 — Données et API
- Route Handlers : GET, POST, PUT, DELETE
- Validation de données avec Zod
- Prisma ORM : schema, migrations, requêtes
- Connexion à PostgreSQL
- Revalidation de données (revalidatePath, revalidateTag)
- Gestion des erreurs API
Module 4 — UI et performance
- next/image : optimisation automatique des images
- next/font : polices optimisées sans layout shift
- next/script : chargement différé des scripts tiers
- Metadata API : SEO dynamique
- Sitemap et robots.txt dynamiques
- Parallel routes et intercepting routes
Module 5 — Authentification et autorisation
- NextAuth.js (Auth.js) : configuration
- Providers : credentials, Google, GitHub
- Sessions et JWT
- Middleware pour protéger les routes
- Gestion des rôles et permissions
- CSRF et sécurité
Module 6 — Déploiement et production
- Configuration Vercel pour Next.js
- Variables d'environnement (server et client)
- Monitoring avec Vercel Analytics
- Optimisation des builds
- CDN et cache strategy
- Projet final : application Next.js complète
Résultats attendus
- Créer des applications Next.js de niveau professionnel
- Maîtriser les patterns SSR/SSG/ISR
- Déployer et maintenir des applications en production
- Optimiser pour le SEO et les performances
Technologies utilisées
Next.jsReactTypeScriptPrismaPostgreSQLTailwind CSSVercelNextAuth.js
Questions fréquentes
Next.js est-il difficile à apprendre après React ?
Si vous maîtrisez React, la transition vers Next.js est naturelle. Next.js ajoute des concepts (SSR, routing, API routes) mais la syntaxe React reste identique. La plupart des développeurs React deviennent productifs avec Next.js en 1 à 2 semaines.
Faut-il payer pour déployer sur Vercel ?
Vercel propose un plan gratuit généreux, suffisant pour la plupart des projets personnels et petits projets professionnels. Les plans payants commencent à 20$/mois pour les projets plus exigeants.
Next.js est-il adapté pour les sites e-commerce ?
Oui, Next.js est l'un des frameworks les plus utilisés pour l'e-commerce. Des boutiques comme Gymshark,SeatGeek et bien d'autres l'utilisent. Le SSR est idéal pour le SEO des fiches produits.
Prêt à commencer ?
Commencer la formation Next.js. Contactez-nous pour obtenir un devis personnalisé ou pour toute question sur la formation.