Finissez votre voyage Front-End
Next.js : Cours Complet
Il est là, enfin, le cours complet Next.js !
Next.js est le Framework de React, cela peut paraître étrange au premier abord, mais ce qu'il apporte à React est tout simplement essentiel.
Il faut rappeler que React n'est pas officielement un Framework, c'est une librairie, c'est à dire qu'elle n'apporte pas un cadre complet de travail, elle permet "simplement" de créer des applications web à l'aide de composants et de fonctionnalités géniales.
Pour preuve, on a besoin d'utiliser des outils externes pour réaliser certaines tâches, comme React-Router, Redux, etc ...
Enfin et surtout, les applications crées avec React n'ont pas un bon SEO, tout simplement car un énorme paquet(bundle) javaScript est retourné par le serveur, et non du contenu qui pourrait se faire parcourir par les "crawlers" de Google & Co.
Les avantages et fonctionnalités de Next :
- Un système de routing intégré et très simple à utiliser
- De la création de pages statiques hyper rapides et bonnes pour le SEO
- Une optimisation des pages, du < head > aux images
- Du rendu côté serveur si on en a besoin
- Une utilisation de données (API, base de données, etc..) extremement simple et performante
- De la création d'API directement avec Next
- Etc ...
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)
- 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