Chapitre 1 : Introduction à Next.js

• Qu'est-ce que Next.js ?
  • Présentation de Next.js et de ses fonctionnalités.
  • Pourquoi choisir Next.js plutôt que d'autres frameworks ?
  • Applications réelles de Next.js.
• Prérequis
  • Connaissance de base de JavaScript, React et Node.js.
  • Logiciel requis (Node.js, npm/yarn).
  • Configuration de l'environnement de développement (VS Code ou tout éditeur préféré).

Chapitre 2 : Configuration du projet Next.js

• Installation de Next.js
  • Création d'un nouveau projet Next.js avec npx create-next-app.
  • Aperçu de la structure des répertoires.
  • Utilisation de TypeScript avec Next.js.
• Comprendre la structure des fichiers
  • Répertoire de pages et système de routage.
  • Répertoire public pour les actifs statiques.
  • Répertoire API pour les routes backend.

Chapitre 3 : Créer votre première page

• Création de pages
  • Présentation du dossier Pages.
  • Création et liaison de pages.
  • Navigation entre les pages avec suivant/lien.
• Routage dynamique
  • Création d'itinéraires dynamiques avec [param].
  • Routage imbriqué et ses cas d'utilisation.
• Comprendre le pré-rendu
  • Génération statique vs rendu côté serveur.
  • Comment utiliser getStaticProps et getServerSideProps.

Chapitre 4 : Style dans Next.js

• Modules CSS
  • Comment utiliser les modules CSS pour un style étendu.
  • Gestion du CSS global.
• Composants stylisés
  • Configuration des composants stylisés dans Next.js.
  • Gestion des thèmes.
• Utiliser Sass avec Next.js
  • Installation et configuration de Sass.
  • Bonnes pratiques d'utilisation de Sass dans un projet Next.js.

Chapitre 5 : Récupération de données dans Next.js

• Récupération de données côté client
  • Utilisation de fetch et axios pour récupérer des données dans le composant.
• Récupération de données côté serveur
  • Utilisation de getServerSideProps pour le rendu côté serveur.
• Récupération de données statiques
  • Utilisation de getStaticProps et getStaticPaths pour la génération statique.
  • Régénération statique incrémentielle (ISR) pour le contenu dynamique.

Chapitre 6 : Routes API dans Next.js

• Création de routes API
  • Présentation du répertoire API.
  • Création d'API RESTful simples.
• Gestion des requêtes API
  • Comprendre les objets de requête et de réponse.
  • Gestion des erreurs et codes de réponse.

Chapitre 7 : Utiliser Next.js avec un CMS

• Configurer un CMS
  • Pourquoi utiliser un CMS avec Next.js ?
  • Intégration avec les options CMS populaires (WordPress, Contentful, Sanity, etc.).
• Récupération des données CMS dans Next.js
  • Comment connecter votre CMS à Next.js.
  • Gérer du contenu dynamique avec un CMS.

Chapitre 8 : Next.js et l'authentification

• Mise en œuvre de l'authentification
  • Stratégies d'authentification dans Next.js.
  • Utilisation des jetons JWT, des cookies et de la gestion de session.
• Authentification tierce
  • Mise en place de fournisseurs OAuth (Google, GitHub).
  • Utiliser des bibliothèques comme NextAuth.js pour l'authentification.

Chapitre 9 : Optimisation des performances

• Optimisation des images
  • Utilisation du composant Next.js Image pour des images optimisées.
  • Chargement paresseux des images.
• Optimisation des scripts
  • Comprendre le composant Next.js Script.
  • Différer le chargement du script asynchrone.
• Fractionnement de code et chargement paresseux
  • Comment Next.js gère automatiquement le fractionnement du code.
  • Mise en œuvre d'importations dynamiques pour de meilleures performances.

Chapitre 10 : SEO dans Next.js

• Comprendre le référencement dans Next.js
  • Importance du référencement pour les applications Next.js.
• Balises méta et graphique ouvert
  • Utilisation de next/head pour les balises SEO.
  • Configuration des balises Open Graph et Twitter Card.
• Génération de plans de site et de Robots.txt
  • Création de plans de site dynamiques.
  • Utilisation de robots.txt pour les robots d'exploration.

Chapitre 11 : Déploiement de Next.js

• Plateformes de déploiement
  • Vercel : la plateforme recommandée pour Next.js.
  • Autres plateformes : AWS, Netlify et DigitalOcean.
• Déploiement sur Vercel
  • Guide étape par étape pour déployer votre application sur Vercel.
• Configuration pour la production
  • Variables d'environnement dans Next.js.
  • Bonnes pratiques pour une application Next.js prête pour la production.

Chapitre 12 : Configuration et personnalisation avancées

• Personnalisation de la configuration du Webpack
  • Utilisation de next.config.js pour une configuration avancée.
  • Ajout de chargeurs et de plugins Webpack personnalisés.
• Serveur personnalisé
  • Quand utiliser un serveur personnalisé.
  • Mise en œuvre d'un serveur personnalisé avec Express.

Chapitre 13 : Gestion des états dans Next.js

• Introduction à la gestion de l'État
  • Quand et pourquoi utiliser la gestion des états dans Next.js.
  • Options de gestion de l'état (React Context, Redux, Recoil, Zustand).
• Utilisation de l'API contextuelle React
  • Configuration de l'état global avec React Context.
  • Passer l'état entre les composants.
• Intégration de Redux avec Next.js
  • Configuration de Redux avec Next.js.
  • Gestion de l'état dans les environnements côté serveur et côté client.

Chapitre 14 : Tests dans Next.js

• Pourquoi tester les applications Next.js ?
  • Importance des tests et différents types de tests.
  • Présentation des outils de test (Jest, React Testing Library, Cypress).
• Tests unitaires avec Jest
  • Configuration de Jest dans un projet Next.js.
  • Rédaction de tests unitaires pour les composants et les fonctions utilitaires.
• Tests d'intégration avec la bibliothèque de tests React
  • Test des composants et des pages avec la bibliothèque de tests React.
  • Récupération de données moqueuse et appels API.

Conclusion

• Réflexions finales
  • Résumé des principaux points à retenir.
  • Ressources pour un apprentissage ultérieur.
  • Encourager les lecteurs à explorer et à expérimenter Next.js.

Pour un apprentissage plus approfondi, continuez votre voyage ici.