Formation Next.js
- Mise à jour : 2024
- 40 heures
- Projets
- Quiz
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
- Maîtriser le rendu côté serveur et client avec Next.js pour des applications web performantes
- Comprendre l'architecture complète d'une application Next.js et optimiser sa structure
- Créer des routes statiques et dynamiques pour un routage efficace et flexible
- Optimiser le référencement en agrémentant votre site de métadonnées et données structurées
- Gérer la mise en cache des données et le pré-rendu pour une meilleure performance utilisateur
- Créer un système de navigation robuste et intuitif dans une application Next.js
- Gérer l'internationalisation d'une application Next.js pour un public multilingue
- Utiliser 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çons 01:05:56
- Bienvenue sur Next.js !
- Qu'est-ce que Next.js ?
- A quoi sert Next.js ?
- Configuration de l'environnement
- Chapitre 2 : Création et architecture d'une application Next.js4 leçons 01:19:03
- Installation avec create-next-app
- Présentation de l'architecture
- Analyse d'une requête vers Next.js
- Création d'un premier segment
- Chapitre 3 : Routage et navigation serveur5 leçons 02:04:14
- Segments statiques et dynamiques
- Fichiers de routage pour Next.js
- Comportements et utilisations des fichiers de routage
- Groupe de routes
- Liens et redirections
- Chapitre 4 : Création du projet - MyMovieApp4 leçons 01:51:07
- Installation & configuration de l'application
- Mise en place des premiers styles SASS
- Gestion des erreurs
- Préparation de la navigation
- Chapitre 5 : Composants serveurs et clients5 leçons 01:44:58
- Composants serveurs et clients
- Inclusion des composants
- Partage de données entre composants clients
- Les variables d'environnement
- En pratique : création d'une todo-list
- Chapitre 6 : Dynamisation de la page d'accueil - MyMovieApp4 leçons 01:58:25
- Intégration de l'API
- Affichage des médias populaires
- Dynamisation du champs de recherche
- Affichage des genres de médias
- Chapitre 7 : Hooks des composants clients4 leçons 01:01:46
- useRouter
- useParams et useSearchParams
- useSelectedLayoutSegment
- usePathname
- Chapitre 8 : Rendu statique et dynamique4 leçons 01:16:12
- Qu'est-ce que le rendu statique et dynamique ?
- En pratique : découverte des rendus de page
- Gestion du rendu pour les segments dynamiques
- Configurations de segments et revalidate
- Chapitre 9 : Création des pages films et genres - MyMovieApp4 leçons 01:24:41
- Layout et sidebar des pages
- Dynamisation de la recherche
- Implémentation du formulaire de recherche
- Rendus et revalidation
- Chapitre 10 : Récupération de données : fonction fetch5 leçons 01:26:34
- Requêtes parallèles et séquentielles
- Quelles fonctionnalités pour fetch ?
- Options de cache et revalidate
- Cas d'erreurs et fonction cache
- Rendu progressif : Streaming
- Chapitre 11 : Création de la page film - MyMovieApp4 leçons 01:08:39
- Configuration du segment et mise en place de la page
- Images du film et titre
- Informations détaillées du film et acteurs
- Titres similaires et introspection du rendu
- Chapitre 12 : Route handler et revalidate4 leçons 01:29:15
- Qu'est ce que les route handler dans Next.js ?
- Revalidate à la demande : path et tag
- Cookies, headers et redirect
- Route handler : en pratique
- Chapitre 13 : Middleware et internationalisation4 leçons 01:22:07
- Création d'un middleware
- Manipulation de la requête et réponse
- Routes protégées
- Internationalisation
- Chapitre 14 : Internationalisation - MyMovieApp4 leçons 01:07:12
- Création du middleware i18n
- Adaptation du routage
- Mise en place du dictionnaire
- Sélecteur de langue
- Chapitre 15 : Mise en place de l'authentification avec NextAuth - MyMovieApp4 leçons 01:55:19
- Mise en place de prisma
- Routes d'authentification et configuration de NextAuth
- Interfaces d'authentification et protection de pages
- Ajout et affichage des médias appréciés
- Chapitre 16 : Métadonnées et données structurées (SEO)5 leçons 01:19:47
- Qu'est-ce que les métadonnées ?
- Manipulation de l'objet metadata
- Implémentation de la fonction generateMetadata
- Génération d'images dynamiques pour le protocole OpenGraph
- Ajout de données structurées
- Chapitre 17 : Typescript avec Next.js4 leçons 00:52:58
- Pourquoi utiliser Typescript ?
- Installation de TypeScript et découverte du plugin de Next.js
- Routage : types statiques des routes statiques et dynamiques
- Utilisation de types inhérents à Next.js
- Chapitre 18 : Déploiement d'une application Next.js4 leçons 00:50:45
- Déploiement comme site statique
- Déploiement avec Vercel, analytics et storage (kv, blob)
- Installation et déploiement de l'application
- Configuration et installation du VPS
É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
Cette 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 !
Mathieu P.Étudiant(e) vérifié(e)J'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.
Julien R.Étudiant(e) vérifié(e)La 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.
Sophie L.Étudiant(e) vérifié(e)
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.
Nos étudiants ont également suivi
18 chapitres
76 leçons
94 quiz
Version 14
Un certificat de réussite
Adapté pour les téléphones