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 officiellement 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.
Next.js vient quant à lui apporter un vrai cadre de travail avec React, tout en gardant ses fonctionnalités phares (composants, state, props, hooks, contexte, etc ...).
Les avantages et fonctionnalités de Nextjs et pourquoi vous devez l'apprendre :
- 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, des 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 ...
Alléchant, n'est-ce pas ?
Au programme de ce tuto Next.js cours complet
Et maintenant, de quoi est composé le cours en ligne ?
- 1. Un rappel React & JavaScript (seulement pour ceux qui en ont besoin)
- 2. On attaque avec le système de routing
- 3. L'optimisation des pages avec Next
- 4. Le rendu de pages, le rendu côté serveur et l'utilisation de données
- 5. Projet pratique : création d'un Blog
- 6. Création d'API avec Next.js
- 7. Déploiement
Un QCM vous permettra de valider vos nouvelles compétences en plus du projet pratique.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce tuto.
On se donne rendez-vous de l'autre côté pour commencer tout ça !
Table des matières de cette formation JavaScript, React (durée : 5h48m)
-
Introduction
- Introduction gratuit 00:02:57
- Éditeur et conseils 00:03:22
-
(Facultatif) Rappel React & JavaScript
- Let & Const gratuit 00:11:07
- Fonction fléchées VS Fonction classique 00:06:48
- Spread & Rest 00:04:36
- Fonctions pures 00:03:39
- HOF 00:06:04
- Les méthodes des tableaux 00:02:59
- Destructuring 00:03:37
- Création d'un App React 00:06:07
- Le JSX 00:07:43
- Les Composants 00:03:01
- Le fonctionnement de l'App 00:01:55
- Les "props" 00:07:05
- Le State avec useState 00:07:47
- Retourner une liste gratuit 00:05:46
- Utiliser du CSS 00:06:43
- Les "controlled" et "uncontrolled" inputs 00:10:33
- Les "React fragments" 00:02:05
- Le hook "useEffect" 00:07:06
- Créer un Router 00:09:51
- Utiliser l'API de Contexte 00:05:57
-
Le Routing avec Next
- Mise en place 00:08:28
- Créer des routes 00:05:29
- Créer des routes dynamiques 00:02:49
- Les liens 00:03:50
- Créer des composants classiques 00:02:57
- Utiliser useRouter 00:04:55
- Créer un container global avec _app 00:04:53
- Gérer l'erreur 404 00:01:10
- Résumé du Routing avec Next 00:03:36
-
Optimiser avec Next
- Utiliser du CSS 00:05:10
- Utiliser un Framework CSS 00:02:25
- Optimiser le Head 00:08:20
- Optimiser les images 00:08:09
- Optimiser les images 2 00:05:49
- Utiliser le _document.js 00:04:40
-
Gérer le rendu des pages et des données
- Explication du rendu des pages 00:07:33
- Lancer un "npm run build" 00:05:54
- Utiliser la méthode "getStaticProps" 00:09:49
- Faire de l'ISR (Incremental static generation) 00:07:28
- Les autres propriétés utiles 00:03:46
- Exercice : Liste 00:03:40
- Résolution : Liste 00:08:56
- Utiliser la méthode "getStaticPaths" 00:12:50
- Finitions UI 00:05:34
- La propriété "Fallback" 00:05:32
- Le rendu côté serveur 00:06:30
- Résumé du Chapitre 00:04:34
-
Projet Blog avec Next.js
- Introduction 00:03:44
- Page d'accueil 00:07:03
- La Navbar 00:04:01
- La page de Blog 00:06:40
- Afficher les articles 00:04:17
- Afficher la liste d'utilisateurs 00:04:36
- Afficher un utilisateur 00:09:21
-
Créer une API avec Next
- Créer une API de base 00:04:12
- Afficher un mot au hasard 00:07:16
- Créer un formulaire 00:04:06
- Utiliser une requête "POST" pour changer les données 00:06:49
-
Créer une API avec Next
- Déployer son App sur Vercel 00:05:04
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Enzo Ustariz
-
Je remercie beaucoup Enzo pour son tuto . Honnêtement, il maîtrise très bien son sujet. Ses explications sont claires. Il va droit au but et c'est toujours ponctué d'exemples faciles à suivre malgré la complexité de React, qui est derrière Next.js. J'en suis à le leçon 20 et je suis conquis. En plus, l'ayant suivi sur d'autres tutos, il avait tendance à avoir un débit assez rapide. Dans ce tuto, ce n'est pas le cas. Un grand merci, donc à Enzo, pour sa générosité. Quel bonheur de comprendre des choses complexes. On ne peut les assimiler que si nous avons pas un enseignant de qualité. Enzo fait partie de ceux-la.
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissé