Cours Next.js en ligne
Le cours en ligne Next.js sur CodeWorlds compte 9 modules de courtes leçons avec un éditeur de code et 688 exercices pratiques, racontés comme une aventure. Tu peux lire les leçons gratuitement sur ce site.
Bienvenue dans la Métropole Quantum de l'an 2150. Apprends Next.js en construisant des applications fullstack avancées dans une ville futuriste.
Ton guide
AI Guide Nexus
Intelligence artificielle
Ce que tu apprendras
- Next.js 16 App Router et structure de projet
- Server-Side Rendering (SSR) et Static Site Generation (SSG)
- Régénération statique incrémentale (ISR)
- API Routes et Server Actions
- Intégration de bases de données (Prisma, PostgreSQL)
- Authentification avec NextAuth.js
- Optimisation des images et lazy loading
- Déploiement sur Vercel
Projets principaux
Au cours de la formation, tu construiras de vrais projets que tu pourras ajouter à ton portfolio
Quantum Dashboard
Tableau de bord admin avec SSR, authentification et base de données
Blog du réseau neuronal
Plateforme de blog avec ISR, MDX et commentaires
E-commerce de la Mégapole
Boutique en ligne avec Stripe, panier et checkout
Programme du cours
9 modules remplis d'exercices interactifs et de projets pratiques
Entrée dans la Métropole
Configuration de Next.js
Installation et démarrage du projet, structure app/ et pages/, Client et Server Components, Turbopack, débogage et rendu
82 exercices
- Introduction à React et Next.js
- Installation et configuration de l'environnement de développement
- Initialisation du projet et starters disponibles
- Structure des dossiers et fichiers dans Next.js (app/ vs pages/)
Toutes les leçons (11)
- Système de composants - composants client et serveur
- Première application « Hello World » - étape par étape - une page simple pour une entreprise spatiale
- Instrumentation et débogage des applications
- Outils de développement Next.js
- Turbopack et optimisation de la compilation
- Environnement de développement - outils et pratiques
- Le rendu dans Next.js - aperçu des stratégies
Hyperloop urbain
Routing et layouts
Routing basé sur les fichiers, segments dynamiques, Link et useRouter, layouts et loading UI, 404 et redirections, middleware, prefetching
80 exercices
- Système de routage basé sur les fichiers
- Segments de route dynamiques et paramètres
- Navigation avec le composant Link et useRouter
- Regroupement et organisation des routes
Toutes les leçons (11)
- Routes imbriquées et paramètres catch-all
- Interface de chargement et layout.tsx
- Gestion des 404 et redirections (not-found.js et redirects)
- Middleware et interception des requêtes
- Préchargement et optimisation de la navigation
- Shallow Routing - navigation sans rechargement de page
- Routage avancé : Parallel Routes, Intercepting Routes et Route Groups
Interfaces holographiques
Styles et optimisation visuelle
CSS Modules, Tailwind CSS, shadcn/ui, composant Image et chargement des images, polices, favicon, animations et dark mode
79 exercices
- Styles globaux et CSS Modules
- Intégration et configuration de Tailwind CSS dans Next.js 16
- Shadcn/UI - Composants pour Next.js 16
- Composant Image et optimisation des images dans Next.js 16
Toutes les leçons (11)
- Stratégies de chargement des images (lazy, eager, priority) dans Next.js 16
- Optimisation des polices et composant Font dans Next.js 16
- Gestion des assets statiques dans le répertoire public de Next.js 16
- Icônes, favicon et métadonnées visuelles dans Next.js 16
- Animations et transitions de l'interface utilisateur dans Next.js 16
- Mode sombre et préférences utilisateur dans Next.js 16
- Benchmarks de performance dans Next.js 16 - SSR vs SSG vs ISR
Mainframe central
Bases de données et accès aux données
Prisma ORM, modèles et migrations, données dans les Server et Client Components, Server Actions, recherche, pagination et N+1
86 exercices
Traitement quantique
Stratégies de rendu
SSR, SSG et ISR dans l'App Router, revalidation des données, streaming avec Suspense, skeletons, Partial Prerendering, cache et Edge
65 exercices
Terminal citoyen
Formulaires et Server Actions
React Hook Form, validation Zod côté client et serveur, gestion des erreurs et error.tsx, formulaires accessibles et multi-étapes
69 exercices
Système d'identification
Authentification et autorisation
NextAuth.js et Auth.js, connexion Google et GitHub, sessions et jetons, rôles et permissions, middleware de protection, OWASP et Clerk
76 exercices
Le spatioport
Déploiement et production
SEO et métadonnées, Open Graph, sitemap et robots.txt, analytics, déploiement Vercel et Netlify, variables d'environnement, CI/CD et PWA
74 exercices
- Préparer ton application pour la production
- SEO et métadonnées dynamiques
- Open Graph et partage sur les réseaux sociaux
- Générer des sitemaps et le fichier robots.txt
Toutes les leçons (12)
- Intégration avec les outils de Web Analytics
- Déployer sur Vercel, Netlify et d'autres plateformes
- Variables d'environnement et configuration de production
- CI/CD et automatisation du déploiement
- Monitoring des performances et analytics des erreurs
- Progressive Web Apps et Service Workers
- Preview Deployments et environnements de staging
- Projet : déploiement en production d'une application Next.js complète
Le réseau de Mega City
Intégrations et fonctions avancées
Strapi, Stripe, Resend et React Email, Zustand, TanStack Table, next-intl, Docker, Turborepo, after() et use cache de Next.js 15
77 exercices
- Introduction à Next.js et Strapi
- Next.js et Stripe - système de paiement complet
- Next.js avec Resend et React Email - système d'e-mail moderne
- Next.js avec Zustand - gestion d'état moderne
Toutes les leçons (13)
- Server Actions - patterns avancés
- Next.js avec TanStack Table - tableaux de données avancés
- Typed Routes - liens typés avec TypeScript
- Internationalisation avec next-intl
- Next.js et Docker - conteneurisation d'application
- Monorepo avec Turborepo
- forbidden() et unauthorized() - nouvelles fonctions de Next.js 15
- API after() - exécuter du code après la réponse
- use cache - une nouvelle ère de mise en cache dans Next.js 16
Thème du cours
Métropole Quantum et technologies avancées
Chaque module est ancré dans un univers unique qui transforme l'apprentissage en aventure.
Ton guide
AI Guide Nexus
Intelligence artificielle
Il te guidera à travers tous les défis et t'aidera à acquérir de nouvelles compétences.
Questions fréquentes sur le cours Next.js
Le cours Next.js est-il gratuit ?
En partie. Tu peux lire gratuitement les leçons du cours Next.js sur ce site. Les tâches du cours dans l'application nécessitent un plan premium ; avec un compte gratuit, tu peux suivre dans l'application le cours HTML et CSS avec 10 unités de carburant par jour.
Combien de temps dure le cours Next.js ?
La durée d'apprentissage estimée du cours Next.js est de 80-100 heures. Le cours compte 9 modules et plus de 688 tâches, et c'est toi qui choisis le rythme.
Ai-je besoin d'une expérience préalable pour le cours Next.js ?
Avant le cours Next.js, il est utile d'avoir : Monde 2 (React.js), Bases du JavaScript/TypeScript, Connaissance des REST API.
Qu'est-ce que je vais apprendre dans le cours Next.js ?
Dans le cours Next.js, tu apprendras entre autres : Next.js 16 App Router et structure de projet, Server-Side Rendering (SSR) et Static Site Generation (SSG), Régénération statique incrémentale (ISR), API Routes et Server Actions.
Comment se passe l'apprentissage sur CodeWorlds ?
Sur CodeWorlds, chaque module est une série de courtes leçons avec un éditeur de code en direct, des quiz et des tâches pratiques. Ta progression te rapporte de l'XP et débloque de nouveaux lieux du monde Cyberpunk 2150.
Commence à apprendre Next.js 16 dès aujourd'hui
Rejoins CodeWorlds et découvre des méthodes d'apprentissage modernes qui rendent la programmation fascinante et accessible à tous.