Retour aux formations
Officiel

Next.js 14 & React Server Components — Avancé

Par DevWorkWeb

Pas encore d'avis 6.1 h de contenu Avancé
Aperçu Contenu Avis Enseignant

Ce cours conduit un développeur Next.js déjà à l'aise (niveau Intermédiaire acquis) jusqu'à la livraison d'une application complète en production : authentification côté serveur avec middleware, connexion à une base de données via Prisma, référencement avancé, sécurité spécifique au rendu serveur, et architecture professionnelle. Il se conclut par la construction de DevWork Academy, une plateforme d'apprentissage complète.

Ce que vous allez apprendre

Implémenter une authentification côté serveur avec middleware et sessions
Connecter Next.js à une base de données avec Prisma
Optimiser le référencement avec l'API Metadata, Open Graph et les données structurées
Sécuriser une application Next.js contre les vulnérabilités courantes en contexte SSR
Optimiser images, fonts et performance globale (Core Web Vitals)
Livrer une architecture professionnelle complète et un projet SaaS de bout en bout

Prérequis

Avoir terminé « Next.js 14 & React Server Components — Intermédiaire » (Data Fetching avancé, cache, Server Actions, Route Handlers).

Public cible

  • • Développeurs ayant terminé « Next.js 14 & React Server Components — Intermédiaire »
  • • Développeurs visant un poste de développeur Next.js/Full Stack professionnel

Programme détaillé

7 modules · 26 leçons
1. Authentification serveur 4 leçons

Contrairement à l'authentification React côté client déjà vue en React Avancé, Next.js permet une authentification gérée directement par le serveur via middleware.

  • Sessions et cookies côté serveur 14 min
  • Le middleware Next.js pour protéger des routes 16 min
  • Rôles et permissions côté serveur 14 min
  • NextAuth.js / Auth.js en aperçu 12 min
✓ Quiz de validation (2 questions)
2. Base de données avec Prisma 4 leçons

Connecter Next.js à une vraie base de données via Prisma, l'ORM le plus utilisé dans l'écosystème.

  • Configurer Prisma dans un projet Next.js 14 min
  • Définir des modèles et relations Prisma 16 min
  • Requêtes Prisma dans un Server Component 16 min
  • Mutations Prisma dans une Server Action 14 min
✓ Quiz de validation (2 questions)
3. SEO avancé 4 leçons

Le référencement est un argument de poids pour Next.js — ce module exploite pleinement l'API Metadata et les données structurées.

  • L'API Metadata statique et dynamique 16 min
  • Open Graph et Twitter Cards 12 min
  • Sitemap et robots.txt dynamiques 14 min
  • Données structurées (JSON-LD) 14 min
✓ Quiz de validation (2 questions)
4. Images, fonts et performance 3 leçons

Pousser plus loin l'optimisation déjà entamée dans le cours gratuit, avec un focus sur les Core Web Vitals mesurés par Google.

  • next/font pour des polices optimisées 12 min
  • Core Web Vitals expliqués 14 min
  • Optimiser le LCP avec next/image et le préchargement 14 min
✓ Quiz de validation (1 questions)
5. Sécurité Next.js 3 leçons

Adapter les principes de sécurité déjà vus (cours Cybersécurité) au contexte spécifique du rendu serveur et des Server Actions.

  • XSS dans un contexte Server Components 12 min
  • Sécuriser les Server Actions 14 min
  • Variables d'environnement : NEXT_PUBLIC_ et secrets serveur 14 min
✓ Quiz de validation (3 questions)
6. Architecture professionnelle Next.js 3 leçons

Structurer un projet Next.js de taille réelle avec une organisation par feature, adaptée aux spécificités de l'App Router.

  • Organiser app/ avec des groupes de routes par domaine 14 min
  • Feature-based au sein de components/ et features/ 14 min
  • Services et accès aux données centralisés 12 min
7. Projet final — DevWork Academy 5 leçons

Mobiliser l'ensemble du parcours Next.js dans une plateforme d'apprentissage complète, aussi riche qu'une mini-version de DevWorkWeb.

  • Cahier des charges de DevWork Academy 12 min
  • Authentification et profils utilisateurs 14 min
  • Learning : formations, modules, leçons et certification 18 min
  • Dashboard et Jobs 14 min
  • Finalisation, SEO et déploiement 14 min

🎯 Projet final

DevWork Academy — plateforme d'apprentissage complète

Le projet final consiste à construire une plateforme d'apprentissage complète en Next.js 14, intégrant authentification, base de données, catalogue de formations avec suivi de progression et certification, dashboard et offres d'emploi.

  • Accès à vie
  • Certificat inclus
  • Exercices pratiques
  • Mises à jour gratuites

Avis des apprenants

Aucun avis pour l'instant. Soyez le premier à donner le vôtre.

Formations similaires

Développement Web : créer son premier site de A à Z

DevWorkWeb Gratuit
JA

JavaScript de zéro : les fondamentaux

DevWorkWeb Gratuit
RE

React.js : créer sa première application moderne

DevWorkWeb Gratuit