Développeur Next.js Complet

Bienvenue dans notre cours Next.js, où nous priorisons un apprentissage efficace. Dites adieu aux tutoriels démodés et déroutants qui font perdre votre temps précieux !

Nous vous emmènerons au-delà des fondamentaux, vous permettant de créer des applications modernes et de niveau entreprise en utilisant les dernières technologies Next.js.

Et le mieux ? Vous apprendrez dans une communauté dynamique.

En vous inscrivant aujourd'hui, vous aurez accès à notre salle de classe communautaire en ligne exclusive, vous connectant avec des milliers d'autres étudiants, anciens élèves, mentors, assistants pédagogiques et instructeurs.

Captivant. Dynamique. Soutenant. Amical. Inspirant. Essentiel.

Ces mots décrivent comment les étudiants se sentent à propos du Discord ZTM, l'une des plus grandes et actives communautés de développeurs sur Discord.

Plus important encore, vous serez guidé par des vétérans de l'industrie (Ankita et Andrei) qui apportent une expérience du monde réel en tant qu'ingénieurs seniors dans des entreprises de premier plan à Silicon Valley et Toronto. De plus, Ankita est un conférencier et une intervenante régulière lors de conférences prestigieuses sur Next.js et React.

Ce cours axé sur les projets vous éclairera sur l'ensemble des outils modernes pour développeurs Next.js en 2024.

Vous allez même créer une application clone de Netflix utilisant React Hooks, Hasura (GraphQL), Context API, Airtable, Functions sans serveur, Framer Motion, Vercel, et plus encore.

Contrairement à la plupart des tutoriels en ligne sur Next.js, il s'agit d'une application complète et full-stack !

Tout le codage est fourni étape par étape, donc même si vous choisissez de ne pas coder en même temps, vous aurez accès au code complet du projet master (oui, vous construirez Netflix !) à montrer dans votre portfolio.

Voici ce que le cours impliquera pour vous transformer d'un novice à un expert Next.js

Le programme est pratique, vous guidant de la conception du projet au lancement d'une application Next.js professionnelle en production.

Nous commencerons par les bases en abordant les fondamentaux de Next.js.

Mais ce n'est que le début ; nous allons ensuite approfondir les sujets avancés pour vous aider à faire des choix architecturaux et d'outils éclairés pour vos futures aventures Next.js.

Voici un aperçu des sujets que vous allez couvrir :

1. Notions de base Next.js

Nous explorerons les différences entre Next.js et React, mettrons en avant les nombreux avantages de Next.js et expliquerons le concept de JAM Stack. Cette section fondamentale pose les bases de l'ensemble du cours.

2. Votre première application Next.js | Projet Coffee Connoisseur

Vous créerez votre premier projet instantanément. Ce projet vise à vous enseigner les éléments essentiels de Next.js, en se concentrant sur la configuration du projet, les modules CSS, le rafraîchissement rapide, et plus encore.

3. Routage dans Next.js | Coffee Connoisseur

Vous apprendrez différents aspects du routage, y compris les routes dynamiques, les routes d'index, les routes nommées et le composant link.

4. Styliser dans Next.js | Coffee Connoisseur

Ce segment couvre le style de vos applications avec des modules CSS, la séparation des styles des composants, et l'application de styles globaux.

5. Hydratation, SEO et techniques de rendu dans Next.js

Cette portion critique discute des éléments essentiels du SEO, comment Next.js booste le SEO et diverses techniques de rendu telles que la génération de sites statiques, le rendu côté serveur, la régénération statique incrémentielle et le rendu côté client.

6. Pages du magasin de café statiques | Coffee Connoisseur

Apprenez les subtilités du rendu statique et comment décider ce qu'il faut rendre statiquement tout en effectuant des requêtes API à Foursquare et en mettant en œuvre SSG.

7. Localisation des cafés | Coffee Connoisseur

Cette section explore différents fallback dans le rendu statique, ainsi que la récupération des emplacements des utilisateurs et l'utilisation de la Context API.

8. Functions sans serveur | Coffee Connoisseur

Que sont les functions sans serveur, et quand sont-elles applicables ? Vous créerez des functions sans serveur pour récupérer des informations sur les cafés statiques.

9. Stockage des données de la cafétéria avec Airtable | Coffee Connoisseur

Vous plongerez dans le stockage de base de données avec Airtable, stockant les données de café et apprenant sur le rendu côté client.

10. SWR et rendu côté client | Coffee Connoisseur

Qu'est-ce que SWR, et quand devriez-vous l'utiliser ? Vous utiliserez Next.js pour SWR et le rendu côté client dans cette partie.

11. Déploiement et optimisation | Coffee Connoisseur

Apprenez à déployer votre application sur Vercel et Netlify, découvrez différents fournisseurs de cloud, comprenez ce qu'est Lighthouse et optimisez la performance de votre Next.js.

12. Configuration du projet | Clone de Netflix avec Next.js

Préparez-vous pour votre projet principal ! Cette section porte sur la préparation du clone de Netflix.

13. Page d'accueil Netflix et affichage vidéo | Clone de Netflix avec Next.js

Construisez la page d'accueil de Netflix avec le rendu côté serveur, apprenant à invoquer l'API YouTube pour récupérer et afficher des vidéos. Vous utiliserez également Framer Motion pour des conceptions de cartes complexes.

14. Authentification avec Magic | Clone de Netflix avec Next.js

Découvrez comment fonctionne l'authentification dans Next.js en mettant en œuvre un login sans mot de passe et en créant une page de connexion sécurisée.

15. Régénération statique incrémentielle | Clone de Netflix avec Next.js

Mettez en avant des vidéos sur la page d'accueil et utilisez ISR pour créer une page modale, en apprenant plus sur la génération statique incrémentielle.

16. Explorer Hasura GraphQL | Clone de Netflix avec Next.js

Découvrez GraphQL, Hasura et leur architecture sous-jacente, en configurant votre projet dans l'environnement Hasura.

17. Authentification Hasura | Clone de Netflix avec Next.js

Apprenez l'architecture du flux d'auth et utilisez le SDK côté serveur pour la connexion des utilisateurs.

18. Page des appréciations et des favoris | Clone de Netflix avec Next.js

Configurez Hasura pour un service d'évaluations, développez une API d'évaluations pour aimer/désaimer des vidéos et créez une page de liste de favoris.

19. Déploiement final | Clone de Netflix avec Next.js

Établissez le dépôt final sur GitHub, configurez-le et déployez-le sur Vercel !

20. Introduction à React | Section optionnelle

Une section complémentaire pour ceux qui ont besoin d'un rafraîchissement sur React.js et React Hooks pour maximiser votre expérience de cours.

Curieux de savoir quelle est la meilleure partie ?

Ce cours continuera d'évoluer et de s'adapter au sein de l'écosystème Next.js.

Au fur et à mesure que des mises à jour se produisent dans le domaine de Next.js, attendez-vous à ce que notre cours se rafraîchisse avec de nouvelles leçons et ressources.

Cela signifie que vous pouvez revisiter le cours à tout moment pour vous remettre à jour sur les dernières meilleures pratiques Next.js.

Alors, quel est le résumé ?

Ce cours ne consiste pas simplement à coder en suivant sans saisir les concepts fondamentaux, vous conduisant à terminer sans savoir comment procéder, autre qu'en regardant plus de tutoriels... Pas question !

Nous visons à vous élever d'un débutant complet à faire partie des 10 % supérieurs des développeurs Next.js et React 💪.

Comment savons-nous que cela fonctionne ?

Parce que de nombreux anciens élèves de Zero To Mastery ont réussi à décrocher des postes dans des entreprises comme Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook et Shopify.

Nos diplômés représentent divers horizons, âges et expériences, avec beaucoup d'entre eux commençant d'un endroit de complète inexpérience.

Alors, pourquoi pas vous ?

Avec rien à perdre, vous pouvez commencer votre parcours d'apprentissage aujourd'hui, et si vous trouvez que le cours ne répond pas à vos attentes, nous offrons un remboursement rapide à 100 % dans les 30 jours. Sans poser de questions.