Développer des extensions Google Chrome avec JS
Développer des extensions Google Chrome avec JS
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 !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
(Facultatif) Rappel React & JavaScript
(Facultatif) Rappel React & JavaScript
Chapitre 3
Le Routing avec Next
Le Routing avec Next
Chapitre 4
Optimiser avec Next
Optimiser avec Next
Chapitre 5
Gérer le rendu des pages et des données
Gérer le rendu des pages et des données
Chapitre 6
Projet Blog avec Next.js
Projet Blog avec Next.js
Chapitre 7
Créer une API avec Next
Créer une API avec Next
Plan détaillé du cours
Chapitre 1 : Introduction
06m19s
Leçon 1Introduction
Leçon 2Éditeur et conseils
Chapitre 2 : (Facultatif) Rappel React & JavaScript
2h29s
Leçon 1Let & Const
Leçon 2Fonction fléchées VS Fonction classique
Leçon 3Spread & Rest
Leçon 4Fonctions pures
Leçon 5HOF
Leçon 6Les méthodes des tableaux
Leçon 7Destructuring
Leçon 8Création d'un App React
Leçon 9Le JSX
Leçon 10Les Composants
Leçon 11Le fonctionnement de l'App
Leçon 12Les "props"
Leçon 13Le State avec useState
Leçon 14Retourner une liste
Leçon 15Utiliser du CSS
Leçon 16Les "controlled" et "uncontrolled" inputs
Leçon 17Les "React fragments"
Leçon 18Le hook "useEffect"
Leçon 19Créer un Router
Leçon 20Utiliser l'API de Contexte
Chapitre 3 : Le Routing avec Next
38m07s
Leçon 1Mise en place
Leçon 2Créer des routes
Leçon 3Créer des routes dynamiques
Leçon 4Les liens
Leçon 5Créer des composants classiques
Leçon 6Utiliser useRouter
Leçon 7Créer un container global avec _app
Leçon 8Gérer l'erreur 404
Leçon 9Résumé du Routing avec Next
Chapitre 4 : Optimiser avec Next
34m33s
Leçon 1Utiliser du CSS
Leçon 2Utiliser un Framework CSS
Leçon 3Optimiser le Head
Leçon 4Optimiser les images
Leçon 5Optimiser les images 2
Leçon 6Utiliser le _document.js
Chapitre 5 : Gérer le rendu des pages et des données
1h22m
Leçon 1Explication du rendu des pages
Leçon 2Lancer un "npm run build"
Leçon 3Utiliser la méthode "getStaticProps"
Leçon 4Faire de l'ISR (Incremental static generation)
Leçon 5Les autres propriétés utiles
Leçon 6Exercice : Liste
Leçon 7Résolution : Liste
Leçon 8Utiliser la méthode "getStaticPaths"
Leçon 9Finitions UI
Leçon 10La propriété "Fallback"
Leçon 11Le rendu côté serveur
Leçon 12Résumé du Chapitre
Chapitre 6 : Projet Blog avec Next.js
39m42s
Leçon 1Introduction
Leçon 2Page d'accueil
Leçon 3La Navbar
Leçon 4La page de Blog
Leçon 5Afficher les articles
Leçon 6Afficher la liste d'utilisateurs
Leçon 7Afficher un utilisateur
Chapitre 7 : Créer une API avec Next
22m23s
Leçon 1Créer une API de base
Leçon 2Afficher un mot au hasard
Leçon 3Créer un formulaire
Leçon 4Utiliser une requête "POST" pour changer les données
Chapitre 8 : Créer une API avec Next
05m04s
Leçon 1Déployer son App sur Vercel
Avis des apprenants