Next #C-2/2. Créer un application Next JS complète. Côté BACK
Next #C-2/2. Créer un application Next JS complète. Côté BACK
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
Projet Full-Stack : Création d'Axoria, blog 'Tech' communautaire
Projet Full-Stack : Création d'Axoria, blog 'Tech' communautaire
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 : Projet Full-Stack : Création d'Axoria, blog 'Tech' communautaire
12h05
Leçon 1Présentation du projet
Leçon 2Mise en place
Leçon 3Création du layout et de la technique du "footer toujours en bas" partie 1
Leçon 4Création du layout et de la technique du "footer toujours en bas" partie 2
Leçon 5Création de la page d'accueil avec des données statiques
Leçon 6Création du formulaire de mise en ligne partie 1
Leçon 7Création du formulaire de mise en ligne partie 2
Leçon 8Création de la base de données et connexion
Leçon 9Création de la server action "addPost"
Leçon 10Création du modèle du premier article
Leçon 11Afficher un article
Leçon 12Créer "getPosts" pour récupérer plusieurs articles
Leçon 13Coder l'interface de l'ajout de tags
Leçon 14Coder les fonctions liées aux tags
Leçon 15Créer le modèle "tag"
Leçon 16Création des tags
Leçon 17Enrichir getPost et afficher les tags
Leçon 18Transformer le Markdown en HTML et l'afficher
Leçon 19Gérer les attaques XSS
Leçon 20Styliser un article
Leçon 21Utiliser une colorisation syntaxique pour enjoliver le code dans l'article
Leçon 22Gérer les infos liées à l'ajout d'un article
Leçon 23Créer les pages de connexion et d'inscription
Leçon 24UI de la page d'inscription
Leçon 25Créer le modèle "user"
Leçon 26Créer la server action register
Leçon 27Gérer l'envoi du formulaire
Leçon 28Coder l'UI de la page de connexion
Leçon 29Comment fonctionne une authentification par session de base de données ?
Leçon 30Création du modèle "session"
Leçon 31Création de la server action login
Leçon 32Gérer l'envoi du formulaire de connexion
Leçon 33Créer la méthode lisant le cookie d'authentification
Leçon 34Affichage conditionnel dans la Navbar
Leçon 35Création du dropdown, partie 1
Leçon 36Gestion du clic en dehors du dropdown
Leçon 37Mise en place du "sign out"
Leçon 38Gérer la potentielle redirection
Leçon 39Création de la sous-classe AppError
Leçon 40Mieux gérer les erreurs
Leçon 41Gérer les erreurs de l'inscription
Leçon 42Gérer les erreurs des méthodes serveurs
Leçon 43Mise en place des pages privées
Leçon 44Coder l'interface de mise en ligne de l'image
Leçon 45Création du compte BunnyCDN
Leçon 46Logique Back-End de la mise en ligne de l'image partie 1
Leçon 47Logique Back-End de la mise en ligne de l'image partie 2
Leçon 48Afficher l'image de l'article et l'auteur partie 1
Leçon 49Afficher l'image de l'article et l'auteur partie 2
Leçon 50Créer le composant réutilisable BlogCard
Leçon 51Créer l'interface de la liste du dashboard partie 1
Leçon 52Créer l'interface de la liste du dashboard partie 2
Leçon 53Récupérer les posts d'un utilisateur
Leçon 54Gérer la suppression d'un post
Leçon 55Créer une aggregation
Leçon 56Coder l'UI de la page categories
Leçon 57Récupérer les posts par tag
Leçon 58Créer l'interface de la page des posts par tag
Leçon 59Coder l'UI de la page des articles par auteur
Leçon 60Créer la fonction de récupération des posts par auteur
Leçon 61UI de la page de mise à jour d'un article
Leçon 62Gérer la validation UX côté front
Leçon 63Créer la Server Action editPost partie 1
Leçon 64Créer la Server Action editPost partie 2
Leçon 65Créer la Server Action editPost partie 3
Leçon 66Créer la Server Action editPost partie 4
Leçon 67Créer la Server Action editPost partie 5
Leçon 68Créer la Server Action editPost partie 6
Leçon 69Créer la Server Action editPost partie 7
Leçon 70Créer une route d'API de vérification d'authentification partie 1
Leçon 71Créer une route d'API de vérification d'authentification partie 2
Leçon 72Création d'un middleware next partie 1
Leçon 73Création d'un middleware next partie 2
Leçon 74Créer un contexte pour mieux gérer l'auth de notre app partie 1
Leçon 75Créer un contexte pour mieux gérer l'auth de notre app partie 2
Leçon 76Afficher l'état de l'auth côté client
Leçon 77Gérer quelques erreurs
Leçon 78Coup du gueule sur le caching, c'est très important.
Leçon 79Stratégie de cache des pages qui affichent des listes d'articles
Leçon 80Potentielle erreur avec notFound()
Leçon 81Gérer le cache des pages d'article partie 1
Leçon 82Gérer le cache des pages d'article partie 2
Leçon 83Afficher un loader entre les pages
Leçon 84Derniers ajustements et bravo !
Leçon 85Étapes de mise en ligne d'un projet
Avis des apprenants