CLI pour cloner des dépôts NextJS avec système d'authentification et ajout de composants
npm install @fazycks/nextjs-template-clinextjs-cli add
bash
Via npm
npm install -g nextjs-cli
Via pnpm
pnpm add -g nextjs-cli
Via yarn
yarn global add nextjs-cli
`
$3
`bash
git clone
cd NextJs-CLI
npm install
npm run build
npm link
`
🎯 Utilisation
$3
`bash
Méthode 1: Avec le nom du projet
nextjs-cli create mon-projet
Méthode 2: Sélection interactive
nextjs-cli create
Forcer un gestionnaire de paquets spécifique
nextjs-cli create mon-projet --pm pnpm
nextjs-cli create mon-projet --package-manager yarn
Via pnpm dlx (sans installation)
pnpm dlx nextjs-cli@latest create mon-projet
`
$3
`bash
Dans un projet NextJS existant
cd mon-projet-nextjs
Ajout avec sélection interactive
nextjs-cli add
Ajout direct par nom
nextjs-cli add ui-components
nextjs-cli add nextjs-clean
nextjs-cli add auth-system
Forcer un gestionnaire de paquets spécifique
nextjs-cli add ui-components --pm pnpm
nextjs-cli add auth-system --package-manager yarn
Ne pas installer les dépendances automatiquement
nextjs-cli add ui-components --no-install
Via pnpm dlx (comme ShadCN)
pnpm dlx nextjs-cli@latest add ui-components
pnpm dlx nextjs-cli@latest add
`
$3
`bash
Tous les composants
nextjs-cli list-components
Par catégorie
nextjs-cli list-components --category ui
nextjs-cli list-components -c auth
Alias court
nextjs-cli list-comp
`
$3
`bash
Lister les utilisateurs de test
nextjs-cli list-users
Lister les templates de projets
nextjs-cli list-repos
Lister les gestionnaires de paquets disponibles
nextjs-cli list-package-managers
nextjs-cli list-pm
Valider la configuration
nextjs-cli validate
Aide
nextjs-cli --help
nextjs-cli add --help
nextjs-cli create --help
`
📦 Composants disponibles
$3
- nextjs-clean - Configuration NextJS propre avec TypeScript et Tailwind CSS
- database-setup 🔒 - Configuration Prisma + PostgreSQL
$3
- ui-components - Pack de composants UI réutilisables (Button, Card, etc.)
$3
- auth-system 🔒 - Système d'authentification NextAuth.js complet
_🔒 = Nécessite une authentification_
👥 Utilisateurs de test
| Nom d'utilisateur | Email | Accès privé | Description |
| --- | --- | --- | --- |
| admin | admin@example.com | ✅ | Administrateur avec accès complet |
| user1 | user1@example.com | ❌ | Utilisateur standard (composants publics uniquement) |
| developer | dev@example.com | ✅ | Développeur avec accès aux composants privés |
🏗️ Architecture du projet
`
src/
├── types/
│ └── index.ts # Types TypeScript
├── services/
│ ├── auth.service.ts # Service d'authentification
│ ├── repository.service.ts # Gestion des templates de projets
│ ├── component.service.ts # Gestion des composants (nouveau)
│ ├── git.service.ts # Service de clonage Git
│ ├── config.service.ts # Service de configuration
│ ├── data.service.ts # Service de données
│ └── validation.service.ts # Service de validation
└── index.ts # Point d'entrée du CLI
`
� Développement
`bash
Installation des dépendances
npm install
Mode développement
npm run dev
Construction
npm run build
Mode watch
npm run watch
Test du CLI en développement
npx ts-node src/index.ts --help
npx ts-node src/index.ts add ui-components
`
🧪 Tests
`bash
Sur Windows
test-cli.bat
test-components.bat
Sur Linux/Mac
./test-cli.sh
./test-components.sh
`
⚙️ Configuration
$3
`bash
cp .env.example .env
`
$3
Le CLI utilise config.json pour la configuration des utilisateurs, dépôts et composants.
🎨 Ajout de nouveaux composants
$3
`json
{
"name": "mon-composant",
"displayName": "Mon Composant Génial",
"description": "Description du composant",
"category": "ui",
"isPrivate": false,
"requiresAuth": false,
"dependencies": ["package1", "package2"],
"devDependencies": ["@types/package1"],
"files": [
{
"path": "components/MonComposant.tsx",
"type": "file",
"content": "// Code du composant..."
}
]
}
`
$3
Ajoutez votre composant dans la section components du fichier config.json.
🚀 Publication sur NPM
$3
`bash
Build
npm run build
Vérification
npm pack --dry-run
Publication
npm publish
`
$3
`bash
Installation globale
npm install -g nextjs-cli
Utilisation directe (comme ShadCN)
npx nextjs-cli@latest add ui-components
pnpm dlx nextjs-cli@latest add auth-system
`
🔒 Sécurité
⚠️ Important : Ce projet utilise une base de données fictive à des fins de démonstration.
En production :
- Utilisez une vraie base de données
- Chiffrez les tokens GitHub
- Implémentez une authentification OAuth
- Utilisez des variables d'environnement
- Validez toutes les entrées utilisateur
📖 Comparaison avec ShadCN UI
| Fonctionnalité | ShadCN UI | NextJS CLI |
| --- | --- | --- |
| Ajout de composants | npx shadcn@latest add button | npx nextjs-cli@latest add ui-components |
| Sélection interactive | npx shadcn@latest add | npx nextjs-cli@latest add |
| Liste des composants | npx shadcn@latest add --help | nextjs-cli list-components |
| Type de composants | UI uniquement | UI + Auth + Setup + Database |
| Authentification | Non | Oui (pour composants privés) |
�️ Fonctionnalités avancées
$3
- Clone shallow (--depth 1)
- Nettoyage automatique de l'historique Git
- Validation des URLs avant clonage
$3
- Installation automatique des packages npm
- Séparation dependencies/devDependencies
- Confirmation utilisateur avant installation
$3
- Noms de projets (2-50 caractères, format valide)
- URLs GitHub avec tokens d'authentification
- Structure de projet NextJS
📄 Licence
MIT - Voir le fichier LICENSE pour plus de détails.
🤝 Contribution
1. Fork le projet
2. Créer une branche feature (git checkout -b feature/AmazingFeature)
3. Commit les changements (git commit -m 'Add AmazingFeature')
4. Push vers la branche (git push origin feature/AmazingFeature)
5. Ouvrir une Pull Request
📞 Support
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
- 📧 Email: votre-email@example.com
---
Inspiré par ShadCN UI - Créé avec ❤️ pour la communauté NextJS
📦 Gestionnaires de paquets supportés
Le CLI détecte et supporte automatiquement plusieurs gestionnaires de paquets :
| Gestionnaire | Installation | Commande d'installation | Détection |
| --- | --- | --- | --- |
| pnpm | npm install -g pnpm | pnpm add | pnpm-lock.yaml |
| yarn | npm install -g yarn | yarn add | yarn.lock |
| bun | Voir bun.sh | bun add | bun.lockb |
| npm | Inclus avec Node.js | npm install | package-lock.json |
$3
- 🔍 Détection automatique - Le CLI détecte le gestionnaire utilisé dans votre projet
- 📋 Sélection interactive - Choix du gestionnaire si plusieurs sont disponibles
- ⚙️ Configuration automatique - Mise à jour du package.json avec le champ packageManager`