Formation Leaflet 2/12 - Coupler une carte OpenStreetMap avec une base de données
Formation Leaflet 2/12 - Coupler une carte OpenStreetMap avec une base de données
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
Gérer le routing avec l'app router
Gérer le routing avec l'app router
Chapitre 3
Composants et manipulation de données
Composants et manipulation de données
Chapitre 4
Styles et optimisation
Styles et optimisation
Chapitre 5
[Ancien cours] Introduction
[Ancien cours] Introduction
Chapitre 6
[Ancien cours] (Facultatif) Rappel React & JavaScript
[Ancien cours] (Facultatif) Rappel React & JavaScript
Chapitre 7
[Ancien cours] Le Routing avec Next
[Ancien cours] Le Routing avec Next
Plan détaillé du cours
Chapitre 1 : Introduction
09m21
Leçon 1Introduction
Leçon 2Éditeur de code
Chapitre 2 : Gérer le routing avec l'app router
1h26
Leçon 1Explication de dossier
Leçon 2Créer des routes
Leçon 3Les Layouts
Leçon 4Utiliser des liens <Link>
Leçon 5Les routes dynamiques 1/2
Leçon 6Les routes dynamiques 2/2
Leçon 7Gérer le chargement d'une page
Leçon 8Gérer les erreurs
Leçon 9Gérer l'erreur 404
Leçon 10Grouper ses routes
Chapitre 3 : Composants et manipulation de données
1h16
Leçon 1Comment Next rend une page et les types de composant
Leçon 2Créer un composant serveur
Leçon 3Les composants client
Leçon 4Attention à l'imbrication des composants
Leçon 5Les Server Actions
Leçon 6Les Server Actions partie 2
Leçon 7Utiliser une server action dans un composant client
Leçon 8Utiliser le dossier /api
Leçon 9Les middlewares
Leçon 10Utiliser un state manager partie 1
Leçon 11Utiliser un state manager partie 2
Chapitre 4 : Styles et optimisation
35m21
Leçon 1Optimisation des polices d'écriture (fonts)
Leçon 2Utiliser Tailwind avec Next
Leçon 3Utiliser les CSS Modules
Leçon 4Utiliser SASS avec Next
Leçon 5Optimisation des images
Leçon 6Gérer les métadonnées
Chapitre 5 : [Ancien cours] Introduction
06m19
Leçon 1Introduction
Leçon 2Éditeur et conseils
Chapitre 6 : [Ancien cours] (Facultatif) Rappel React & JavaScript
2h29
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 7 : [Ancien cours] Le Routing avec Next
38m07
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 8 : [Ancien cours] Optimiser avec Next
34m33
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 9 : [Ancien cours] Gérer le rendu des pages et des données
1h22
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 10 : [Ancien cours] Projet Blog avec Next.js
39m42
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 11 : [Ancien cours] Créer une API avec Next
22m23
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 12 : [Ancien cours] Créer une API avec Next
05m04
Leçon 1Déployer son App sur Vercel
Avis des apprenants