• Catalogue •
  • Développez des applications full-stack en JavaScript avec NextJS et React

Développez des applications full-stack en JavaScript avec NextJS et React

Découvrez comment créer des sites internet plus rapidement et facilement, de manière full-stack avec React et NextJS !

Développez des applications full-stack en JavaScript avec NextJS et React
15 heures
Tous les niveaux

Présentation

Bienvenue sur le cours sur NextJS, le seul cours dont vous avez besoin pour apprendre à utiliser NextJS, même en partant de zéro.

Avec plus de 15 heures, ce cours est sans doute le plus complet que vous puissiez trouver. Même si vous n'avez aucune expérience en programmation avec NextJS, vous passerez du niveau débutant à celui de professionnel grâce à ce cours. Voici pourquoi :

  • Ce cours est enseigné par le formateur emblématique de BELIEVEMY, l'un des meilleurs acteurs de la pédagogie dans le domaine du développement web

  • Ce cours a été entièrement mis à jour pour la toute dernière version de NextJS, vous apprendrez les toutes dernières nouveautés et les meilleures astuces de programmation du moment

  • Ce cours n'est pas un cours magistral : vous allez passer par toutes les émotions et vous allez pratiquer avec des cas concrets et de nombreux challenges.

  • L'ensemble du contenu du cours a été vu et revu pendant plusieurs mois par plusieurs développeurs professionnels de NextJS pour être parfaitement en adéquation avec les besoins professionnels des entreprises

  • Plus de 100.000 étudiants ont déjà appris le développement web grâce à nos cours

  • Ce cours est constamment mis à jour avec de nouveaux contenus et de nouveaux projets proposés par les étudiants : c'est-à-dire par vous !

Nous allons y aller pas à pas, nous avancerons méthodiquement et astucieusement pour que vous puissiez toujours comprendre ce que vous faites et pour que vous puissiez apprécier vos résultats.

Prérequis

Vous devez avoir de bonnes bases avec React.

Plan du cours

Tout ouvrir
    Partie 1 : Avant de commencer
  • 1. Qu'allons-nous faire dans cette formation ?
    Extrait
  • 2. Prérequis
    Extrait
  • 3. Comment réussir cette formation ?
    Extrait
  • 4. Comment poser mes questions ?
    Extrait
  • Partie 2 : Partons sur de bonnes bases
  • 5. Comment fonctionne NextJS ?
    Extrait
  • 6. Quels sont les logiciels dont nous allons avoir besoin ?
    Extrait
  • 7. Quelles sont les extensions à installer ?
    Extrait
  • Partie 3 : Quelques rappels sur React
  • 8. Ce module est-il nécessaire pour vous ?
  • 9. Créer un nouveau projet React
  • 10. Découvrons les fichiers générés
  • 11. React et les composants
  • 12. React et le style
  • 13. React et les props
  • 14. React et le state
  • 15. Détecter les événements
  • 16. Les formulaires avec React-Hook-Form
  • 17. Utiliser le hook "useEffect"
  • 18. Nous sommes prêts pour NextJS !
  • Partie 4 : Lançons-nous avec NextJS
  • 19. Créons notre premier projet
    Extrait
  • 20. Découvrons les fichiers et les dossiers générés
  • 21. Ajoutons une page d'accueil
  • 22. Décomposons notre projet
  • 23. Ajoutons des pages supplémentaires
  • 24. Naviguer entre les pages sans rechargement (Link)
  • 25. Une autre façon de gérer nos pages
  • 26. Les routes dynamiques
  • 27. Extraire les informations d'une route dynamique
  • 28. Programmer une navigation (sans le composant Link)
  • 29. Rediriger un utilisateur sur une route dynamique
  • 30. Une autre façon d'utiliser le composant Link
  • 31. Les routes dynamiques imbriquées
  • 32. Les pages qui "attrapent" plusieurs paramètres
  • 33. Modifier la page 404
  • Partie 5 : NextJS et le pré-rendu
  • 34. Qu'allons-nous voir dans cette section ?
  • 35. Le problème avec les applications React traditionnelles
  • 36. Le problème avec les données dynamiques et NextJS
  • 37. Pré-rendons nos données avec getStaticProps
  • 38. Corrigeons certains aspects de notre projet
  • 39. Regardons ce qu'il se passe en arrière-plan
  • 40. Créons une base de données sur MongoDB
  • 41. Ajoutons des projets
  • 42. Récupérons nos projets
  • 43. Continuons sur notre lancée (getStaticPaths)
  • 44. Décomposons notre connexion à MongoDB
  • 45. Récupérer les chemins dynamiquement
  • 46. Afficher les filtres dynamiquement
  • 47. Trier les projets des plus récents aux plus anciens
  • 48. Afficher une page 404 si un projet demandé n'existe pas
  • 49. Mettons en place la génération statique incrémentale (ISR)
  • 50. Corrigeons le problème des listes
  • 51. Regardons ce qu'il se passe en arrière-plan
  • 52. Les autres paramètres de getStaticProps
  • 53. Parlons maintenant du rendu côté serveur (SSR)
  • 54. Quel type de rendu utiliser et quand ?
  • 55. Ajoutons des identifiants aux éléments de la liste
  • 56. Modernisons notre page d'accueil
  • Partie 6 : NextJS et l'optimisation
  • 57. Qu'allons-nous voir dans cette partie ?
  • 58. Le problème avec nos pages
  • 59. Le composant Head
  • 60. Modifier la structure du site avec _document.js
  • 61. Le problème avec nos images
  • 62. Le composant Image
  • 63. Faisons le tour des options du composant Image
  • Partie 7 : NextJS et les APIs
  • 64. Qu'est-ce qu'une API ?
  • 65. Comment fonctionne une SPA ?
  • 66. Le fonctionnement des API avec NextJS
  • 67. Mettons en place un formulaire pour ajouter un projet
  • 68. Envoyons le nouveau projet sur MongoDB avec une API
  • 69. Améliorons l'expérience de notre utilisateur
  • 70. Détecter la méthode utilisée
  • Partie 8 : NextJS et l'authentification
  • 71. Comment fonctionne l'authentification avec NextJS ?
  • 72. Ajoutons un formulaire pour s'inscrire et se connecter
  • 73. Initialisons React Hook Form
  • 74. À lire avant de continuer
  • 75. Utilisons la librairie "next-auth"
  • 76. Rendre fonctionnel l'inscription
  • 77. Sécurisons les mots de passe et ajoutons un loader
  • 78. Rendre fonctionnel la connexion
  • 79. Afficher le pseudo de l'utilisateur
  • 80. Autoriser la déconnexion
  • 81. Masquer des informations selon qu'un utilisateur soit connecté ou non
  • 82. Protéger les pages selon le statut du visiteur
  • 83. Ajouter des rôles aux utilisateurs
  • 84. Mettons en place la variable d'environnement de Next-Auth
  • 85. Créons un bouton pour supprimer notre compte
  • 86. Mettre en place une API sécurisée grâce au JWT
  • 87. Supprimons notre compte
  • Partie 9 : Mettre son projet en ligne
  • 88. Les deux possibilités pour déployer son projet
  • 89. NextJS et le fichier de configuration du projet
  • 90. Déployer son projet sur un serveur NodeJS
  • 91. Déployons notre portfolio sur Vercel !
  • Partie 10 : Conclusion
  • 92. Félicitations ! Vous avez terminé cette formation !
Proposé par Believemy

Gratuit

avec Believemy PRO
Disponible depuis partout : ordinateur, smartphone, tablette
Contenus vidéos en Full HD
+100 000 étudiants se sont formés avec nous
Certification inviolable de fin de formation