
Formation Next.js
- calendar_monthMise à jour : 2026
- schedule40 heures
- scheduleProjets
- quizQuiz
- auto_awesomeEssai gratuit 7 jours
Next.js, créé par Vercel, est un framework React complet pour des applications web fullstack, intégrant un serveur, un système de routage, l'internationalisation, et optimisant le SEO via le rendu côté serveur.



inscrits
Les notions abordées dans la formation
- checkMaîtriser le rendu côté serveur et client avec Next.js pour des applications web performantes
- checkComprendre l'architecture complète d'une application Next.js et optimiser sa structure
- checkCréer des routes statiques et dynamiques pour un routage efficace et flexible
- checkOptimiser le référencement en agrémentant votre site de métadonnées et données structurées
- checkGérer la mise en cache des données et le pré-rendu pour une meilleure performance utilisateur
- checkCréer un système de navigation robuste et intuitif dans une application Next.js
- checkGérer l'internationalisation d'une application Next.js pour un public multilingue
- checkUtiliser des composants clients et serveurs de manière efficace pour une meilleure répartition des responsabilités
Qu'est-ce que Next.js ?
Next.js est un framework JavaScript open-source basé sur React, conçu pour faciliter le développement d'applications web modernes. Il offre des fonctionnalités avancées comme le rendu côté serveur (SSR), la génération statique (SSG), et le routage dynamique, permettant aux développeurs de créer des applications performantes et optimisées pour le SEO.
Ce framework, développé par Vercel, simplifie la création d'applications web fullstack en intégrant des outils clés tels qu'un serveur intégré, la gestion des API, et le support de l'internationalisation. Next.js est particulièrement apprécié pour sa capacité à gérer des projets complexes tout en offrant une expérience utilisateur fluide et rapide.
En plus de ses fonctionnalités natives, Next.js supporte facilement des technologies complémentaires comme TypeScript, Tailwind CSS, et les bases de données via des ORM comme Prisma, ce qui en fait un choix de prédilection pour les développeurs cherchant à bâtir des applications robustes et évolutives.
Les prérequis pour suivre cette formation
- Des connaissance en HTML & CSS sont nécessaires.
- Des connaissance en JavaScript sont nécessaires.
- Des connaissance en React sont nécessaires.
Obtenez un certificat de réussite
Pour chaque formation que vous accomplirez, vous obtiendrez une certification que vous pourrez partager sur LinkedIn.

Projets réalisés pendant la formation
Nous mettrons en pratique toutes les fonctionnalités de Next.js pour créer un moteur de recherche de film avec un gestionnaire de favoris.
Plan de la formation
Afficher tout- Chapitre 1 : Introduction4 leçons01:05:13expand_more
- chevron_rightBienvenue sur Next.js !
- chevron_rightQu'est-ce que Next.js ?
- chevron_rightA quoi sert Next.js ?
- chevron_rightConfiguration de l'environnement
- Chapitre 2 : Création et architecture d'une application Next.js4 leçons01:17:57expand_more
- chevron_rightInstallation avec create-next-app
- chevron_rightPrésentation de l'architecture
- chevron_rightAnalyse d'une requête vers Next.js
- chevron_rightCréation d'un premier segment
- Chapitre 3 : Routage et navigation serveur5 leçons01:57:17expand_more
- chevron_rightSegments statiques et dynamiques
- chevron_rightFichiers de routage pour Next.js
- chevron_rightComportements et utilisations des fichiers de routage
- chevron_rightGroupe de routes
- chevron_rightLiens et redirections
- Chapitre 4 : Création du projet - MyMovieApp4 leçons01:42:10expand_more
- chevron_rightInstallation & configuration de l'application
- chevron_rightMise en place des premiers styles SASS
- chevron_rightGestion des erreurs
- chevron_rightPréparation de la navigation
- Chapitre 5 : Composants serveurs et clients5 leçons01:44:06expand_more
- chevron_rightComposants serveurs et clients
- chevron_rightInclusion des composants
- chevron_rightPartage de données entre composants clients
- chevron_rightLes variables d'environnement
- chevron_rightEn pratique : création d'une todo-list
- Chapitre 6 : Dynamisation de la page d'accueil - MyMovieApp4 leçons01:50:41expand_more
- chevron_rightIntégration de l'API
- chevron_rightAffichage des médias populaires
- chevron_rightDynamisation du champs de recherche
- chevron_rightAffichage des genres de médias
- Chapitre 7 : Hooks des composants clients4 leçons01:02:04expand_more
- chevron_rightuseRouter
- chevron_rightuseParams et useSearchParams
- chevron_rightuseSelectedLayoutSegment
- chevron_rightusePathname
- Chapitre 8 : Rendu statique et dynamique4 leçons01:16:04expand_more
- chevron_rightQu'est-ce que le rendu statique et dynamique ?
- chevron_rightEn pratique : découverte des rendus de page
- chevron_rightGestion du rendu pour les segments dynamiques
- chevron_rightConfigurations de segments et revalidate
- Chapitre 9 : Création des pages films et genres - MyMovieApp4 leçons01:21:04expand_more
- chevron_rightLayout et sidebar des pages
- chevron_rightImplémentation du formulaire de recherche
- chevron_rightDynamisation de la recherche
- chevron_rightRendus et revalidation
- Chapitre 10 : Récupération de données : fonction fetch5 leçons01:26:44expand_more
- chevron_rightQuelles fonctionnalités pour fetch ?
- chevron_rightRequêtes parallèles et séquentielles
- chevron_rightOptions de cache et revalidate
- chevron_rightCas d'erreurs et fonction cache
- chevron_rightRendu progressif : Streaming
- Chapitre 11 : Création de la page film - MyMovieApp4 leçons01:05:09expand_more
- chevron_rightConfiguration du segment et mise en place de la page
- chevron_rightImages du film et titre
- chevron_rightInformations détaillées du film et acteurs
- chevron_rightTitres similaires et introspection du rendu
- Chapitre 12 : Route handler et revalidate4 leçons01:27:22expand_more
- chevron_rightQu'est ce que les route handler dans Next.js ?
- chevron_rightRevalidate à la demande : path et tag
- chevron_rightCookies, headers et redirect
- chevron_rightRoute handler : en pratique
- Chapitre 13 : Middleware et internationalisation4 leçons01:21:38expand_more
- chevron_rightCréation d'un middleware
- chevron_rightManipulation de la requête et réponse
- chevron_rightRoutes protégées
- chevron_rightInternationalisation
- Chapitre 14 : Internationalisation - MyMovieApp4 leçons01:01:27expand_more
- chevron_rightCréation du middleware i18n
- chevron_rightAdaptation du routage
- chevron_rightSélecteur de langue
- chevron_rightMise en place du dictionnaire
- Chapitre 15 : Mise en place de l'authentification avec NextAuth - MyMovieApp4 leçons01:47:00expand_more
- chevron_rightMise en place de prisma
- chevron_rightRoutes d'authentification et configuration de NextAuth
- chevron_rightInterfaces d'authentification et protection de pages
- chevron_rightAjout et affichage des médias appréciés
- Chapitre 16 : Métadonnées et données structurées (SEO)5 leçons01:16:10expand_more
- chevron_rightQu'est-ce que les métadonnées ?
- chevron_rightManipulation de l'objet metadata
- chevron_rightImplémentation de la fonction generateMetadata
- chevron_rightGénération d'images dynamiques pour le protocole OpenGraph
- chevron_rightAjout de données structurées
- Chapitre 17 : Typescript avec Next.js4 leçons00:52:54expand_more
- chevron_rightPourquoi utiliser Typescript ?
- chevron_rightInstallation de TypeScript et découverte du plugin de Next.js
- chevron_rightRoutage : types statiques des routes statiques et dynamiques
- chevron_rightUtilisation de types inhérents à Next.js
- Chapitre 18 : Déploiement d'une application Next.js4 leçons00:51:07expand_more
- chevron_rightConfiguration et installation du VPS
- chevron_rightInstallation et déploiement de l'application
- chevron_rightDéploiement avec Vercel, analytics et storage (kv, blob)
- chevron_rightDéploiement comme site statique
Également inclus dans cette formation

NextAuth.js
NextAuth.js est une librairie open source essentielle pour gérer l'authentification sécurisée dans vos applications Next.js. Dans cette formation, vous apprendrez à intégrer NextAuth.js pour offrir une expérience utilisateur fluide et protéger les données sensibles de vos utilisateurs.

Internationalisation
Internationalisation (i18n) est une compétence clé pour rendre votre application accessible à un public global. Vous découvrirez comment implémenter l'internationalisation dans vos projets Next.js, en gérant efficacement les langues et les contenus pour offrir une expérience utilisateur optimisée, quel que soit le marché ciblé.

Mise en production avec Vercel
Mise en production avec Vercel vous apprendra à déployer rapidement et facilement vos applications Next.js sur un service d'hébergement spécialement conçu pour maximiser les performances et la scalabilité. Vous découvrirez également comment gérer la mise en production manuellement sur votre propre serveur pour un contrôle total sur votre infrastructure.
Évaluations et avis sur la formation Next.js
format_quoteCette formation Next.js m'a permis de découvrir l'incroyable puissance de ce framework. Dès le premier module, j'ai pu comprendre comment Next.js simplifie la création d'applications web modernes avec des fonctionnalités avancées. Les sections sur le routage dynamique et le rendu serveur sont particulièrement bien expliquées. Un must pour tout développeur web ! format_quote
Mathieu P.Compte étudiant vérifiéformat_quoteJ'ai suivi cette formation avec l'objectif d'améliorer mes compétences en développement fullstack, et je n'ai pas été déçu. Les leçons sur l'intégration d'API et la gestion des composants serveurs et clients m'ont vraiment permis de comprendre comment structurer efficacement une application Next.js. Je me sens désormais prêt à créer des projets complexes.format_quote
Julien R.Compte étudiant vérifiéformat_quoteLa formation est incroyablement bien conçue. Le projet MyMovieApp est un excellent exemple pratique qui permet de mettre en œuvre les concepts appris, comme l'internationalisation et l'authentification avec NextAuth. Les instructions sont claires, et les démonstrations en direct rendent l'apprentissage fluide. Je recommande vivement cette formation à tous les développeurs cherchant à se spécialiser en Next.js.format_quote
Sophie L.Compte étudiant vérifié
Ces entreprises offrent cette formation à leurs collaborateurs

Questions fréquemment posées sur la formation Next.js
À quoi sert Next.js ?
Next.js est un framework JavaScript basé sur React qui permet de créer des applications web performantes avec un rendu côté serveur (SSR) et une génération statique (SSG). Il simplifie le développement fullstack en intégrant des fonctionnalités avancées comme le routage dynamique, l'internationalisation, et l'optimisation SEO. Next.js est idéal pour construire des applications modernes et évolutives.
La formation est-elle accessible aux débutants ?
Oui, la formation est conçue pour être accessible même aux débutants ayant des bases en JavaScript et React. Elle commence par l'installation et la configuration de l'environnement Next.js, puis aborde progressivement des concepts plus avancés tels que le routage, les API, et l'authentification. Une connaissance préalable de React est recommandée.
La formation est-elle en ligne ou en présentiel ?
La formation Next.js est entièrement en ligne et peut être suivie à votre propre rythme. Vous avez la liberté d'apprendre quand et où vous le souhaitez, ce qui vous permet de concilier facilement vos études avec d'autres engagements personnels ou professionnels.
Quelles compétences vais-je acquérir grâce à cette formation en ligne ?
- Création et structuration d'applications Next.js avec des pages dynamiques et statiques.
- Gestion du routage dynamique et de l'internationalisation pour des applications multilingues.
- Intégration d'API pour récupérer et afficher des données en temps réel.
- Mise en œuvre d'une authentification sécurisée avec NextAuth.
- Déploiement d'applications Next.js sur des serveurs ou avec des services comme Vercel.
La formation est-elle à jour de la dernière version de Next.js ?
Oui, la formation est régulièrement mise à jour pour inclure les dernières fonctionnalités de Next.js, notamment celles introduites dans les versions récentes. Vous apprendrez à utiliser les dernières méthodes et meilleures pratiques pour développer des applications modernes avec Next.js.
Y a-t-il des travaux pratiques dans la formation ?
Oui, vous réaliserez plusieurs projets pratiques tout au long de la formation, notamment la création d'une application complète MyMovieApp. Ce projet vous permettra de mettre en pratique vos compétences en Next.js, de l'intégration d'API à la gestion des métadonnées pour le SEO, en passant par l'authentification et l'internationalisation.
Comment cette formation m'aidera-t-elle dans ma carrière ?
Maîtriser Next.js vous donnera un avantage significatif sur le marché du travail, en tant que développeur front-end ou full-stack. Vous serez capable de créer des applications web modernes et performantes, et vous aurez les compétences nécessaires pour travailler avec des frameworks populaires comme React et les intégrer dans des projets Next.js, très demandés dans les entreprises.
Le contenu de la formation est-il suffisant pour un projet complet ?
Absolument, la formation couvre tous les aspects nécessaires pour développer des projets Next.js complets. Vous apprendrez à gérer le routage, les API, l'internationalisation, et l'authentification, avec des chapitres dédiés aux concepts avancés et des projets pratiques pour consolider vos compétences.
Combien coûte la formation Next.js ?
La formation Next.js est incluse dans l’abonnement Dyma, qui donne accès à l’ensemble des formations. Trois formules offrent un accès complet au catalogue : 100 € par mois sans engagement, 250 € pour six mois ou 350 € pour douze mois. Les formules de six et douze mois sont payables en une fois ou au moyen d’une facilité de paiement en trois échéances par carte, sans frais ni intérêts. Le calendrier exact des débits, la fin d’accès et le renouvellement sont présentés avant la confirmation du paiement.
La formation Next.js est-elle finançable (CPF, OPCO) ?
Non, la formation Next.js n’est finançable ni par le CPF ni par un OPCO : Dyma n’est pas un organisme certifié Qualiopi. Nous avons fait le choix d’un prix bas et d’un accès immédiat, sans dossier de financement à monter. Pour les équipes, l’abonnement peut être pris en charge directement par votre entreprise dans le cadre de notre offre dédiée.
Nos étudiants ont également suivi
- play_circle
18 chapitres
- list_alt
76 leçons
- help
93 quiz
- account_tree
Version 16
- school
Un certificat de réussite
- smartphone
Adapté pour les téléphones


