Formation : Fullstack avec Next.js : API Routes et base de données

• Développeurs Next.js maîtrisant l'App Router souhaitant exploiter le framework comme solution fullstack complète.
• Personnes ayant suivi la formation Next.js : construire des applications web modernes ou disposant d'une expérience Next.js équivalente en production.
• Développeurs React souhaitant gérer le backend et le frontend dans un seul projet sans framework séparé.
• Personnes visant un poste de développeur fullstack JavaScript en entreprise ou en freelance.

• Comprendre les différentes architectures fullstack possibles avec Next.js et choisir la plus adaptée
• Modéliser et gérer une base de données relationnelle avec Prisma ORM
• Maîtriser les API Routes et les Server Actions pour les mutations de données
• Implémenter une authentification complète avec NextAuth.js v5
• Gérer les sessions, les cookies et la protection des routes
• Gérer l'upload et le stockage de fichiers dans une application Next.js
• Sécuriser les variables d'environnement et les secrets en production
• Déployer une application fullstack Next.js sur Vercel avec base de données cloud

• Next.js fullstack vs Next.js + API séparée : avantages et compromis de chaque approche
• Quand Next.js seul suffit et quand un backend dédié s'impose
• Le modèle mental fullstack Next.js : Server Components, Server Actions, API Routes
• Vue d'ensemble du projet fil rouge : plateforme de contenu avec espace public et back-office

• Créer le projet Next.js avec TypeScript, Tailwind et les dépendances nécessaires
• Configurer les variables d'environnement : .env.local, .env.production
• Organiser les dossiers : app/, lib/, components/, actions/, types/
• Cas pratique : projet opérationnel avec structure professionnelle

• Installer Prisma et initialiser le schéma
• Configurer la connexion à PostgreSQL en local avec Docker
• Le client Prisma singleton : éviter les connexions multiples en développement Next.js
• Prisma Studio : explorer et modifier les données visuellement

• Les types de données Prisma : String, Int, Boolean, DateTime, Enum
• Les relations : @relation, one-to-many, many-to-many avec table de jointure implicite
• Les attributs de champ : @id, @unique, @default, @updatedAt
• Générer et exécuter les migrations avec prisma migrate dev
• Seeder la base de données avec prisma db seed
• Cas pratique : schéma complet User, Post, Category, Tag avec toutes les relations

• CRUD avec Prisma : create, findMany, findUnique, update, delete
• Filtres : where, contains, startsWith, in, gte, lte
• Relations imbriquées : include et select pour charger les données liées
• Pagination avec take et skip
• Transactions Prisma : garantir l'atomicité des opérations multiples
• Cas pratique : page de liste et de détail avec données Prisma depuis un Server Component

• Structure d'une API Route dans App Router : route.ts
• Handlers HTTP : GET, POST, PUT, PATCH, DELETE
• Lire les paramètres d'URL, les query params et le body JSON
• NextResponse : retourner du JSON avec le bon statut HTTP
• Middleware Next.js : intercepter les requêtes avant les routes
• Cas pratique : API REST complète pour une ressource avec pagination

• API Routes vs Server Actions : la règle de décision
• Exposer une API consommée par des clients externes : mobile, tiers
• Webhooks : recevoir et traiter des événements depuis des services externes
• Rate limiting sur les API Routes avec des headers personnalisés
• Cas pratique : webhook de paiement Stripe simulé

• Déclarer une Server Action avec use server dans un fichier dédié actions/
• Appeler une Server Action depuis un formulaire : action={serverAction}
• Appeler une Server Action depuis un Client Component avec un handler
• Revalider le cache après une mutation : revalidatePath et revalidateTag
• Redirections depuis une Server Action avec redirect()
• Cas pratique : création et suppression d'articles via Server Actions

• Valider les données côté serveur avec Zod avant toute persistance
• Retourner des erreurs de validation au formulaire avec useFormState
• useFormStatus : afficher l'état pending du formulaire
• useOptimistic : mettre à jour l'UI avant la confirmation serveur
• Try/catch dans les Server Actions : gérer les erreurs Prisma
• Cas pratique : formulaire de création avec validation Zod et feedback d'erreur par champ

• Installer et configurer NextAuth.js v5 avec App Router
• Le fichier auth.ts : configuration centralisée des providers et callbacks
• Prisma Adapter : stocker les sessions et les comptes en base de données
• Provider Credentials : authentification par email et mot de passe avec bcrypt
• Providers OAuth : Google et GitHub en quelques lignes
• Cas pratique : système de connexion fonctionnel avec Credentials et Google

• Strategy JWT vs database : choisir selon le besoin
• Les callbacks NextAuth : authorize, jwt, session
• Enrichir le token JWT avec des données personnalisées : rôle, id utilisateur
• Accéder à la session côté serveur avec auth() et côté client avec useSession
• Cas pratique : session enrichie avec le rôle de l'utilisateur

• Protéger des routes avec le middleware Next.js et auth()
• Matcher : définir précisément les routes protégées
• Redirection vers la page de connexion pour les utilisateurs non authentifiés
• Page de connexion personnalisée avec le composant SignIn
• Gestion de l'inscription : formulaire, Server Action et création de compte Prisma
• Cas pratique : back-office entièrement protégé avec redirection automatique

• Implémenter les rôles avec un enum Prisma : USER, ADMIN, EDITOR
• Vérifier le rôle dans une Server Action avant toute mutation
• Vérifier le rôle dans un Server Component pour le rendu conditionnel
• Vérifier le rôle dans le middleware pour bloquer les routes d'administration
• Cas pratique : système de rôles complet avec trois niveaux d'accès

• Uploader un fichier depuis un formulaire vers une API Route
• Valider le type MIME et la taille du fichier côté serveur
• Stocker localement dans public/ pour le développement

• Uploader vers Cloudinary ou AWS S3 depuis une Server Action
• Stocker l'URL du fichier dans Prisma après l'upload
• Supprimer un fichier du stockage cloud lors de la suppression en base
• Cas pratique : upload d'avatar utilisateur avec stockage Cloudinary

• Headers de sécurité HTTP dans next.config.js : CSP, X-Frame-Options, HSTS
• Protection CSRF dans les Server Actions : vérification de l'origine
• Valider toutes les entrées avec Zod : ne jamais faire confiance aux données client
• Éviter l'exposition des erreurs Prisma en production

• Variables côté serveur vs variables exposées au client : NEXT_PUBLIC_
• Ne jamais exposer les secrets dans les Client Components ou les API Routes publiques
• Valider les variables d'environnement au démarrage avec Zod
• Cas pratique : audit de sécurité de l'application et correction des vulnérabilités

• Le cache de fetch Next.js : force-cache, no-store, revalidate
• unstable_cache : mettre en cache les résultats de fonctions Prisma
• Les tags de cache : invalider précisément avec revalidateTag
• Full Route Cache : comprendre quand Next.js met une page en cache statique

• Éviter les waterfalls de données avec Promise.all dans les Server Components
• Streaming avec Suspense : afficher les données critiques en priorité
• Analyser le bundle avec @next/bundle-analyzer
• Cas pratique : optimiser une page lente avec cache et Suspense

• Créer une base de données PostgreSQL sur Neon : branchement et connection string
• Configurer Prisma pour le pooling de connexions en serverless avec Prisma Accelerate
• Exécuter les migrations en production : prisma migrate deploy
• Variables d'environnement sur Vercel : DATABASE_URL, NEXTAUTH_SECRET

• Connecter le dépôt GitHub à Vercel
• Configurer les variables d'environnement de production dans Vercel
• Preview deployments : tester chaque branche avant la mise en production
• Domaine personnalisé et HTTPS automatique
• Vercel Analytics et Speed Insights : monitorer les performances en production
• Cas pratique : application complète déployée et accessible en production

• Cahier des charges : plateforme de blog ou marketplace avec espace public et back-office
• Fonctionnalités : authentification NextAuth.js avec Credentials et OAuth, rôles USER et ADMIN, CRUD complet via Server Actions avec validation Zod, Prisma avec toutes les relations du schéma, upload de fichiers vers Cloudinary, cache optimisé avec revalidation, déploiement sur Vercel avec Neon
• Étape 1 : schéma Prisma et migrations
• Étape 2 : authentification et protection des routes
• Étape 3 : Server Actions CRUD avec validation et cache
• Étape 4 : déploiement sur Vercel et recette finale
• Revue de code collective : architecture, sécurité, performances
• Retour formateur individualisé sur le projet rendu

• Concevoir et développer une application fullstack complète avec Next.js comme unique framework
• Modéliser un schéma de base de données avec Prisma et gérer les migrations
• Implémenter une authentification sécurisée avec NextAuth.js et protection des routes
• Gérer les mutations de données avec les Server Actions et la revalidation du cache
• Déployer et maintenir une application Next.js en production sur Vercel avec base de données Neon
• Sécuriser une application fullstack : validation, autorisation, secrets et headers HTTP

• En cours de formation : exercices pratiques corrigés à chaque module
• En fin de formation : réalisation d'une application fullstack Next.js complète déployée sur Vercel
• Questionnaire d'auto-évaluation des acquis en fin de parcours

• Schéma Prisma correctement modélisé avec relations et migrations fonctionnelles
• Authentification NextAuth.js opérationnelle avec protection des routes par rôle
• Server Actions validées avec Zod et cache correctement revalidé après chaque mutation
• Sécurité de l'application : secrets non exposés, validation des entrées, headers HTTP configurés
• Application déployée et accessible en production sur Vercel avec base de données Neon

Cette formation a été créée en 2026. Les indicateurs de résultats (taux de satisfaction, taux d’atteinte des objectifs, taux d’assiduité) seront publiés sur cette page à l’issue des premières sessions réalisées.

• Support de cours numérique mis à disposition des apprenants
• Dépôt GitHub de démonstration avec le projet fil rouge versionné par étape
• Environnement de développement : VS Code + Node.js + Docker Desktop + Prisma Studio
• Pour le distanciel : visioconférence (Zoom ou équivalent), partage d'écran, chat en direct
• Accès à la plateforme pédagogique LaPolaris (supports, ressources, émargement)

• Feuilles d'émargement signées par demi-journée (présentiel) ou émargement numérique (distanciel)
• Traçabilité des activités pédagogiques réalisées
• Attestation d'assiduité délivrée en fin de formation
• Suivi individuel via les exercices corrigés et le projet de synthèse