À propos du cours
Vous souhaitez maîtriser la dernière version de Next.js pour créer des applications web modernes et performantes ? Cette formation complète vous fournit toutes les compétences nécessaires pour devenir expert en développement avec Next.js.
Nous commençons par les bases, en vous guidant à travers l’installation et la configuration de Next.js. Vous apprendrez à créer un projet en exploitant les fonctionnalités essentielles comme le routage dynamique et le rendu côté serveur. Ces techniques vous aideront à concevoir des applications robustes, réactives et optimisées.
Ensuite, nous explorons des fonctionnalités avancées pour perfectionner vos compétences. Vous découvrirez les améliorations du rendu côté client, les optimisations de performance et les outils de développement récents. Grâce à ces nouveautés, vous saurez améliorer l’expérience utilisateur de vos applications.
Notre approche progressive vous permettra d’intégrer ces concepts à votre rythme. Vous apprendrez comment adapter votre architecture selon les besoins de vos projets, tout en conservant une efficacité maximale. À chaque étape, nous vous proposerons des exercices pratiques pour renforcer vos acquis.
Le module final est consacré au déploiement en production. Nous aborderons les bonnes pratiques pour maximiser les performances en utilisant le pré-rendu statique et les plateformes cloud. Vercel, la solution officielle pour Next.js, sera au cœur de ce processus. Vous comprendrez comment déployer vos applications rapidement et en toute sécurité.
Que vous soyez débutant ou expérimenté, cette formation est conçue pour vous aider à franchir une nouvelle étape dans votre parcours de développeur. Vous bénéficierez d’un accompagnement complet pour maîtriser Next.js et créer des projets modernes, évolutifs et adaptés aux exigences actuelles du web.
En vous inscrivant, vous accéderez à toutes les ressources nécessaires pour réussir. N’attendez plus pour développer vos compétences et transformer vos idées en applications performantes.
Qu’allez-vous apprendre ?
- Structure de projet : Organisation des fichiers et dossiers pour une architecture claire.
- Rendu côté serveur (SSR) : Génération dynamique de pages pour une expérience utilisateur optimale.
- Génération de sites statiques (SSG) : Pré-rendu des pages pour améliorer la performance et le SEO.
- Routes dynamiques : Gestion des paramètres d'URL pour des applications évolutives.
- API Routes : Création d'API intégrées pour gérer les requêtes back-end.
- Firebase : Utilisation de Firebase pour la gestion des bases de données en temps réel et l'authentification.
- Prisma : Accès simplifié aux bases de données relationnelles avec un ORM puissant.
- NextAuth : Mise en place d'un système d'authentification sécurisé et flexible.
- TypeScript : Utilisation de TypeScript pour renforcer la robustesse et la maintenabilité du code.
- Déploiement sur Vercel : Processus facile pour mettre en ligne des applications Next.js.
Contenu du cours
Introduction et préparation
-
Introduction à la formation
01:13 -
Introduction à Next JS
02:26 -
Préparation à la formation + Fichiers sources
02:23 -
Installer Next JS et explications fichiers
07:52
Le routing
-
Introduction au routing
04:17 -
Les routes dynamiques et le hook useParams
05:19 -
Les slugs
03:24 -
Le Catch All Segments
04:06 -
Le fichier et la fonction Not Found
03:37 -
File colocation
02:27 -
Private folder
02:27 -
Les groupes de routes
02:49
Structure, Navigation et composants
-
Les layouts
08:58 -
Les metadonnées
07:08 -
Le composant Link
02:25 -
Le hook usePathname
02:44 -
Le hook useRouter
05:03 -
Le composant Image
10:10 -
Les directives useClient et useServer
08:08 -
Le composant Form
04:24 -
Les templates
02:58 -
Le fichier Loader
02:39 -
Le fichier error
04:13 -
Le fichier Instrumentation
06:18
Gestionnaires de route
-
Les routes parallèles
05:34 -
Les unmatched routes
03:15 -
Les routes conditionnelles
03:59
Les routes APIs
-
Les routes APIs
03:00 -
La requête GET
15:34 -
Les SearchParams
09:55 -
La requête POST
15:04 -
La requête PUT
14:09 -
La requête DELETE
05:43 -
Les headers
08:16
Les actions server
-
Introduction aux actions server
02:56 -
Mise en place d’une action pour lire les données
05:55 -
Mise en place d’une action pour lire une donnée via un id
03:25 -
Mise en place d’une action pour modifier une donnée
05:52 -
Mise en place d’une action pour supprimer une donnée
02:26 -
Mise en place d’une action pour créer une donnée
02:58
Les cookies
-
Introduction aux Cookies
02:10 -
Les cookies de sessions
07:39 -
Les cookies persistants
07:12 -
Suppression des cookies
07:27 -
Les cookies dans les server components
06:13
Firebase
-
Installer Next JS et Firebase
05:18 -
Création des pages
03:10 -
Mise en place de la Navigation
04:19 -
Mise en place de Firebase
12:22 -
Mise en place d’un context
12:19 -
Mise en place du Tableau
10:48 -
Mise en place du hook pour la modale
07:30 -
Mise en place du formulaire
14:33 -
Mise en place de React Hook Form et Yup
13:35 -
Mise en place du state pour le formulaire de modification
02:33 -
Fonction CREATE
16:18 -
Fonction UPDATE
07:06 -
Fonction DELETE
03:50 -
Mise en place de la Real Time Database
03:25 -
Mise en place de la page
02:36 -
Fonction CREATE
09:02 -
Fonction READ
06:41 -
Fonction UPDATE
12:44 -
Fonction DELETE
02:43 -
Authentification
02:39 -
Mise en place du formulaire
08:46 -
Mise en place de Yup
07:53 -
Création d’un hook pour l’authentification
09:22 -
Mise en place du Dashboard
05:50 -
Mise en place du Google Provider
02:14
Prisma ORM
-
Introduction à Prisma
02:15 -
Installation et SetUp
04:21 -
Installation de Prisma
02:40 -
Mise en place du Prisma client
05:19 -
Prisma studio
02:18 -
Mise en place des pages et des composants
03:16 -
Afficher les données (READ)
08:06 -
Ajouter des données (CREATE)
06:34 -
Supprimer des données (DELETE)
03:31 -
Récupérer des des données par rapport à un id
09:56 -
Modifier des données (UPDATE)
06:17 -
Les relations
08:53 -
Sélectionner et filtrer
06:05
Authentification avec Next Auth
-
Introduction
02:05 -
Installation et SetUp
05:17 -
Mise en place des pages
03:41 -
Mise en place de la navigation
10:52 -
Installation de NextAuth + fichier env
05:43 -
Récupération des client ID et client Secret Github et Google
05:05 -
Mise en place des options d’authentification
06:01 -
Mise en place du Provider
03:05 -
Mise en place de la page Login
05:51 -
Mise en place de la page Dashboard
09:13 -
Récupération de la session depuis le serveur
03:46 -
Mise en place de firebase
05:17 -
Mise en place du Credentials Provider
08:21 -
Fonctions pour la BDD
06:05 -
Mise en place de notre formulaire d’inscription
29:07 -
Mise en place du formulaire de connexion
07:31
Déployer une application
-
Déployer une application Next JS avec Vercel
03:35
Quiz
-
Quiz Next JS
Conclusion
-
Et apres ?
01:19
Obtenez un certificat
Ajoutez ce certificat à votre CV pour démontrer vos compétences et augmenter vos chances .