Next.js Avancé

Bienvenue dans cette application Next.js avancée avec une configuration monorepo et des composants réutilisables !

TP-Nextjs-tw3
apps
web
components
app
package.json
packages
ui
components
lib
package.json
package.json
turbo.json
pnpm-workspace.yaml

Pourquoi cette structure Monorepo ?

Bienvenue dans l'architecture Monorepo. Contrairement à l'approche "Multirepo" (un dépôt par projet), ici nous regroupons plusieurs projets (apps) et librairies partagées (packages) dans un seul dépôt Git.

C'est une structure standard dans l'industrie (utilisée par Google, Meta, Microsoft) qui facilite grandement le développement d'applications complexes. Voici les concepts clés à retenir pour ce début de module :

Partage de Code Simplifié

Partagez facilement des composants UI, des fonctions utilitaires et des types TypeScript entre plusieurs applications (Web, Mobile, API) sans duplication de code.

Gestion Unifiée des Dépendances

Gérez vos librairies (React, TypeScript, etc.) en un seul endroit. Cela évite les conflits de versions et simplifie les mises à jour pour tous les projets simultanément.

Cohérence des Outils (Tooling)

Utilisez une configuration unique pour vos outils de qualité (ESLint, Prettier, Tests) sur l'ensemble de vos projets, garantissant un standard de code uniforme.

Refactoring Atomique

Modifiez une librairie partagée et mettez à jour instantanément toutes les applications qui l'utilisent en un seul commit, sans casser l'intégration.

ℹ️ Note pour les étudiants : Ne vous inquiétez pas si tout n'est pas clair immédiatement. Nous détaillerons la configuration technique (Turborepo, pnpm workspaces) au fur et à mesure des TPs. Pour l'instant, concentrez-vous sur la structure des dossiers apps/ et packages/.

Le Cerveau du Monorepo : turbo.json

Si le dossier apps/ et packages/ est le corps de notre monorepo, le fichier turbo.json en est le cerveau. C'est le fichier de configuration de Turborepo, l'outil qui pilote notre environnement de développement.

Il permet de transformer une collection de projets isolés en un système cohérent et performant. Voici comment il optimise votre flux de travail au quotidien :

Orchestration des Tâches

Le fichier turbo.json définit le 'pipeline' de votre projet. Il indique à Turborepo comment exécuter les scripts (build, lint, dev) et dans quel ordre, en respectant les dépendances entre vos applications et packages.

Mise en Cache Intelligente

Turborepo mémorise les résultats de vos commandes. Si vous relancez une tâche sans avoir modifié le code, il restitue le résultat instantanément (cache hit) au lieu de tout recalculer, gagnant un temps précieux.

Exécution Parallèle

Grâce à sa compréhension du graphe de dépendances, Turborepo peut lancer plusieurs tâches simultanément sur différents cœurs de votre processeur, accélérant considérablement les temps de build et de test.

Configuration Déclarative

Tout se passe dans ce fichier JSON. Vous y définissez les entrées (inputs) et sorties (outputs) de chaque tâche, permettant à l'outil de savoir exactement quand invalider le cache.

🚀 Astuce : Jetez un œil au fichier turbo.json à la racine du projet. Vous verrez la clé "pipeline" (ou "tasks") qui configure par exemple que la tâche build dépend du build des dépendances (^build).