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
- 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