Nextjs de débutant à professionnel

Prérequis

Avant de plonger dans Next.js, il est recommandé d'avoir une solide compréhension des éléments suivants :

• HTML, CSS et JavaScript: Une solide maîtrise de ces technologies de développement web de base est essentielle.
• React.js: Une compréhension de base des concepts de React, tels que les composants, JSX, l'état et les props, sera utile.

Module 1 : Introduction à Next.js

• Qu'est-ce que Next.js ?
  • Un framework React pour la construction d'applications web
  • Principales fonctionnalités : rendu côté serveur (SSR), génération de site statique (SSG), routes d'API, optimisation d'images, etc.
• Configuration d'un projet Next.js
  • Création d'une nouvelle application Next.js
  • Structure du projet et composants de base
• Routage de base dans Next.js
  • Routage basé sur les fichiers
  • Routage dynamique
  • Composant de lien pour la navigation

Module 2 : Rendu Côté Serveur (SSR)

• Comprendre le SSR
  • Comment fonctionne le SSR
  • Avantages du SSR
• Implémentation du SSR dans Next.js
  • getStaticProps pour les pages générées statiquement
  • getServerSideProps pour les pages générées dynamiquement
• Meilleures pratiques pour le SSR
  • Optimisation des performances
  • Considérations de sécurité

Module 3 : Génération de Site Statique (SSG)

• Comprendre le SSG
  • Comment fonctionne le SSG
  • Avantages du SSG
• Implémentation du SSG dans Next.js
  • Utilisation de getStaticProps pour les pages générées statiquement
  • Revalidation des pages statiques
• Meilleures pratiques pour le SSG
  • Optimisation des performances
  • Fraîcheur du contenu

Module 4 : Routes d'API

• Création de routes d'API
  • Définition des routes d'API dans pages/api
  • Gestion des requêtes et réponses HTTP
• Récupération de données avec les routes d'API
  • Récupération de données à partir d'API externes
  • Protection des routes d'API avec l'authentification
• Meilleures pratiques pour les routes d'API
  • Gestion des erreurs
  • Considérations de sécurité

Module 5 : Optimisation des Images

• Composant d'image Next.js
  • Utilisation de base
  • Techniques d'optimisation d'image
  • Images réactives
• Personnalisation du comportement des images
  • Priorisation des images
  • Chargement paresseux
  • Préchargement

Module 6 : Stylisation dans Next.js

• Modules CSS
  • Portée des styles CSS aux composants
• CSS global
  • Application de styles globaux à l'ensemble de l'application
• Bibliothèques CSS-in-JS
  • Utilisation de styled-jsx ou d'autres solutions CSS-in-JS

Module 7 : Déploiement

• Déploiement sur Vercel
  • Création d'un compte Vercel
  • Déploiement d'une application Next.js sur Vercel
• Déploiement sur d'autres plateformes
  • Déploiement sur Netlify
  • Déploiement sur AWS Amplify

Projets Pratiques

Pour consolider votre compréhension, nous allons travailler sur ces projets :

1. Blog simple:
   • Créez un blog avec des articles, des catégories et une fonction de recherche.
   • Implémentez le SSR pour améliorer le référencement et les performances.
2. Boutique en ligne:
   • Construisez une boutique en ligne de base avec des listes de produits, un panier d'achat et une fonctionnalité de paiement.
   • Utilisez les routes d'API pour récupérer les données des produits à partir d'une API externe.
3. Site Web de Portfolio:
   • Présentez votre travail et vos compétences avec un site Web de portfolio visuellement attrayant.
   • Utilisez le SSG pour pré-rendre les pages statiques pour des temps de chargement plus rapides.