Next.js : Cours Complet
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Next.js : Cours Complet

Enzo Ustariz
42,00€
3 paiements de 14,00€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Chapitre 2
(Facultatif) Rappel React & JavaScript
Chapitre 3
Le Routing avec Next
Chapitre 4
Optimiser avec Next
Chapitre 5
Gérer le rendu des pages et des données
Chapitre 6
Projet Blog avec Next.js
Chapitre 7
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

Détail des avis
8
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Alain Asselin
Alain Asselin
Publié le 11/08/2023
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.

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Payer plus tard ou en 3x

Prix d'achat : 42,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 14,00 €
tous les mois, sans intérêts
Total : 42,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1362 tutos gratuits

Notre politique de protection des données