Finissez votre voyage Front-End
Next.js : Cours Complet
Il est là, enfin, le cours complet Next.js !
Cette technologie est actuellement la plus avancée et demandée dans le milieu.
On peut littéralement créer des applications full-stack de A à Z avec cette dernière.
React pour créer l'interface
Next utilise toujours React sous le capot pour créer les interfaces. Tout ce que vous avez appris sur le state, les composants, le contexte, les hooks et j'en passe vous sera toujours utile avec Next.
Un framework full-stack complet pour gérer le Back et le Front
Next mets en place des tonnes de fonctionnalités pour gérer les différentes parties d'une application web. À l'aide ce cours, vous pourrez :
- Créer des pages statiques et dynamiques. (Parfait pour le SEO)
- Gérer le caching de votre app, idéal pour de bonnes performances.
- Optimiser les images, les métadonnées, les fonts et j'en passe.
- Etre un AS des opérations CRUD afin de gérer vos données correctement côté base de données.
- Utiliser un système de stockage pour des images ou des vidéos.
- Bien savoir utiliser MongoDB.
- Bien gérer les erreurs et les loaders.
- Mettre en place de bonnes pratiques de sécurité.
- Etc ... Toutes les étapes full-stack y passent.
C'est le boss de fin.
Une fois que vous maitrisez la création d'app full-stack, vous n'avez plus aucune limite, vous pouvez littéralement reproduire toutes les start-ups que vous voyez sur le web.
Besoin d'aide ?
Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.
Contenu du cours
- Comment Next rend une page et les types de composant (10:58)
- Créer un composant serveur (11:09)
- Les composants client (6:23)
- Attention à l'imbrication des composants (4:18)
- Les Server Actions (5:41)
- Les Server Actions partie 2 (2:55)
- Utiliser une server action dans un composant client (4:53)
- Utiliser le dossier /api (6:38)
- Utiliser un state manager partie 1 (7:17)
- Utiliser un state manager partie 2 (12:48)
- Les middlewares (3:10)
- Présentation du projet (5:59)
- Mise en place (5:03)
- Création du layout et de la technique du "footer toujours en bas" (17:01)
- Création de la page d'accueil avec des données statiques (22:02)
- Création du formulaire de mise en ligne partie 1 (8:51)
- Création du formulaire de mise en ligne partie 2 (9:01)
- Création de la base de données et connexion (13:25)
- Création de la server action "addPost" (6:20)
- Création du modèle du premier article (13:24)
- Afficher un article (6:53)
- Créer "getPosts" pour récupérer plusieurs articles (6:06)
- Coder l'interface de l'ajout de tags (16:56)
- Coder les fonctions liées aux tags (9:03)
- Créer le modèle "tag" (2:31)
- Création des tags (15:11)
- Enrichir getPost et afficher les tags (6:04)
- Transformer le Markdown en HTML et l'afficher (11:14)
- Gérer les attaques XSS (7:38)
- Styliser un article (2:48)
- Utiliser une colorisation syntaxique pour enjoliver le code dans l'article (10:58)
- Gérer les infos liées à l'ajout d'un article (18:30)
- Créer les pages de connexion et d'inscription (4:26)
- UI de la page d'inscription (16:49)
- Créer le modèle "user" (3:40)
- Créer la server action register (10:22)
- Gérer l'envoi du formulaire (13:24)
- Coder l'UI de la page de connexion (6:43)
- Comment fonctionne une authentification par session de base de données ? (5:00)
- Création du modèle "session" (3:24)
- Création de la server action login (17:12)
- Gérer l'envoi du formulaire de connexion (9:24)
- Créer la méthode lisant le cookie d'authentification (6:29)
- Affichage conditionnel dans la Navbar (3:19)
- Création du dropdown, partie 1 (11:35)
- Gestion du clic en dehors du dropdown (5:04)
- Mise en place du "sign out" (7:21)
- Gérer la redirection après signout sur une route privée (7:37)
- Création de la sous-classe AppError (8:44)
- Mieux gérer les erreurs (8:31)
- Gérer les erreurs de l'inscription (11:57)
- Gérer les erreurs des méthodes serveurs (11:12)
- Mise en place des pages privées (3:46)
- Coder l'interface de mise en ligne de l'image (11:27)
- Création du compte BunnyCDN (8:59)
- Logique Back-End de la mise en ligne de l'image (22:29)
- Afficher l'image de l'article et l'auteur (14:51)
- Créer le composant réutilisable BlogCard (7:36)
- Créer l'interface de la liste du dashboard (11:11)
- Récupérer les posts d'un utilisateur (5:09)
- Gérer la suppression d'un post (21:04)
- Créer une aggregation (10:41)
- Coder l'UI de la page categories (10:04)
- Récupérer les posts par tag (6:51)
- Créer l'interface de la page des posts par tag (4:51)
- Coder l'UI de la page des articles par auteur (8:37)
- Créer la fonction de récupération des posts par auteur (12:40)
- UI de la page de mise à jour d'un article (9:00)
- Gérer la validation UX côté front (13:28)
- Créer la Server Action editPost partie 1 (15:52)
- Créer la Server Action editPost partie 2 (14:54)
- Créer la Server Action editPost partie 3 (9:10)
- Créer la Server Action editPost partie 4 (10:20)
- Créer une route d'API de vérification d'authentification (11:32)
- Création d'un middleware next (16:28)
- Créer un contexte pour mieux gérer l'auth de notre app (12:29)
- Afficher l'état de l'auth côté client (18:30)
- Gérer quelques erreurs (4:11)
- Coup du gueule sur le caching, c'est très important. (5:19)
- Stratégie de cache des pages qui affichent des listes d'articles (7:04)
- Potentielle erreur avec notFound() (3:43)
- Gérer le cache des pages d'article partie 1 (5:14)
- Gérer le cache des pages d'article partie 2 (8:20)
- Afficher un loader entre les pages (4:14)
- Derniers ajustements et bravo ! (2:53)
- Étapes de mise en ligne d'un projet (5:15)
- Let & Const (11:07)
- Fonction fléchées VS Fonction classique (6:47)
- Spread & Rest (4:36)
- Fonctions pures (3:38)
- HOF (6:03)
- Les méthodes des tableaux (2:59)
- Destructuring (3:37)
- Création d'un App React (6:07)
- Le JSX (7:43)
- Les Composants (3:01)
- Le fonctionnement de l'App (1:55)
- Les "props" (7:05)
- Le State avec useState (7:46)
- Retourner une liste (5:46)
- Utiliser du CSS (6:42)
- Les "controlled" et "uncontrolled" inputs (10:32)
- Les "React fragments" (2:05)
- Le hook "useEffect" (7:05)
- Créer un Router (9:50)
- Utiliser l'API de Contexte (5:56)
- Quizz Rappel
- Explication du rendu des pages (7:32)
- Lancer un "npm run build" (5:53)
- Utiliser la méthode "getStaticProps" (9:49)
- Faire de l'ISR (Incremental static generation) (7:27)
- Les autres propriétés utiles (3:46)
- Exercice : Liste (3:40)
- Résolution : Liste (8:56)
- Utiliser la méthode "getStaticPaths" (12:50)
- Finitions UI (5:34)
- La propriété "Fallback" (5:31)
- Le rendu côté serveur (6:29)
- Résumé du Chapitre (4:34)
- Quizz rendu de pages
Cliquez sur les questions
Foire aux questions.
Oui, il vous suffit de cliquer sur votre profil > gérer les abonnements > annuler l'abonnement.
Il vous suffit de rejoindre le serveur Discord dans lequel vous pouvez discuter développement web, demander de l'aide ou encore participer à des concours ou des exercices.
Le Parcours Front-End est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Front-End dans l'ordre.
Il est très important de pratiquer quand on apprend de nouvelles compétences, c'est pourquoi j'ai une page spécialement remplie de dizaines de cours et de projets pratiques!
Rejoignez des milliers d'étudiants