Lecture automatique
Autocomplete
Session précédente
Terminez et continuez
Next.js - Cours Complet
Introduction
Éditeur de code (3:15)
Introduction (6:05)
1. Gérer le routing avec l'app router
Explication de dossier (14:16)
Créer des routes (6:14)
Les Layouts (14:00)
Utiliser des liens (7:26)
Les routes dynamiques 1/2 (14:19)
Les routes dynamiques 2/2 (7:05)
Gérer le chargement d'une page (8:42)
Gérer les erreurs (4:33)
Gérer l'erreur 404 (1:56)
Grouper ses routes (7:34)
Composants et manipulation de données
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)
Styles et optimisation
Optimisation des polices d'écriture (fonts) (11:45)
Utiliser Tailwind avec Next (4:31)
Utiliser les CSS Modules (4:23)
Utiliser SASS avec Next (4:07)
Optimisation des images (6:15)
Gérer les métadonnées (4:17)
Projet Full-Stack : Création d'Axoria, blog 'Tech' communautaire
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)
[ANCIEN COURS] Introduction
Introduction (2:56)
Éditeur et conseils (3:22)
Astuce pour suivre le cours (0:58)
[ANCIEN COURS] (Facultatif) Rappel React & JavaScript
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
[ANCIEN COURS] Le Routing avec Next
Mise en place (8:27)
Créer des routes (5:29)
Créer des routes dynamiques (2:48)
Les liens (3:49)
Créer des composants classiques (2:56)
Utiliser "useRouter" (4:54)
Créer un container global avec _app (4:53)
Gérer l'erreur 404 (1:09)
Résumé du Routing avec Next (3:36)
Quizz Routing
[ANCIEN COURS] Optimiser avec Next
Utiliser du CSS (5:09)
Utiliser un Framework CSS (2:25)
Optimiser le Head (8:20)
Optimiser les images (8:09)
Optimiser les images 2 (5:49)
Utiliser le _document.js (4:39)
[ANCIEN COURS] Gérer le rendu des pages et des données
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
[ANCIEN COURS] Projet Blog avec Next.js
Introduction (3:43)
Page d'accueil (7:03)
La Navbar (4:00)
La page de Blog (6:40)
Afficher les articles (4:17)
Afficher la liste d'utilisateurs (4:36)
Afficher un utilisateur (9:21)
[ANCIEN COURS] Créer une API avec Next
Créer une API de base (4:11)
Afficher un mot au hasard (7:15)
Créer un formulaire (4:05)
Utiliser une requête "POST" pour changer les données (6:48)
Déployer son App
Déployer son App sur Vercel (5:03)
Coder les fonctions liées aux tags
Contenu de la session verrouillé
Si vous êtes déjà inscrit,
vous aurez besoin de vous connecter
.
Achetez le cours pour déverrouiller