Application Next.js moderne (App Router) en TypeScript, prête pour la mise en production, avec Tailwind CSS v4, intégration Supabase (client JS), et déploiement sur Vercel.
🌐 Production: https://negoce-ia.vercel.app
- Aperçu
- Fonctionnalités
- Stack technique
- Prérequis
- Installation
- Configuration (variables d’environnement)
- Lancer le projet
- Scripts NPM
- Arborescence
- Architecture & conventions
- Qualité du code
- Déploiement
- Supabase (intégration)
- FAQ
- Roadmap
- Contribuer
- Licence
Negoce IA est une base Next.js 15 utilisant le routeur App, React 19 et Tailwind CSS 4, pensée pour accélérer la construction d’une application web moderne autour de la visualisation/interaction et d’une possible intégration de données via Supabase. Elle s’appuie sur les bonnes pratiques de l’écosystème Vercel pour un déploiement rapide. ✨
- ⚛️ Next.js 15 (App Router) avec TypeScript
- ⚙️ React 19
- 🎨 Tailwind CSS v4 (configuration PostCSS minimale)
- 🧹 ESLint configuré pour Next.js/TypeScript
- ⚡ Turbopack en développement pour des itérations rapides
- 🖼️ Icônes avec lucide-react
- 📝 Rendu Markdown côté client via react-markdown
- 🔌 Intégration Supabase prête côté client (supabase-js v2)
- 🚀 Configuration de build et déploiement sur Vercel
- Framework: Next.js 15
- Langage: TypeScript
- UI: Tailwind CSS 4
- Icônes/UI: lucide-react (+ utilitaires tailwind-merge)
- Données: Supabase (client JS)
- Rendu Markdown: react-markdown
- Hébergement: Vercel
- 🟢 Node.js >= 18.18.0 (Node 20+ recommandé)
- 📦 npm (recommandé, un
package-lock.jsonest présent)
Cloner le dépôt puis installer les dépendances:
git clone https://github.com/Okpeyemi/negoce-ia.git
cd negoce-ia
npm ci # installation déterministe (ou: npm install)Créez un fichier .env.local à la racine si vous utilisez Supabase:
touch .env.localExemples de variables:
# Supabase (exemples)
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=Notes:
- 🧭 Les clés NEXT_PUBLIC_ sont exposées au client. Ne mettez pas de secrets serveur dans ces variables.
- 🛡️ Pour des usages serveur (si vous en ajoutez), préférez des variables non exposées (sans préfixe NEXT_PUBLIC_) et des routes/Server Actions.
Développement (Turbopack):
npm run dev
# puis ouvrez http://localhost:3000Build et production locale:
npm run build
npm start
# http://localhost:3000Définis dans package.json:
{
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}▶️ dev: lance le serveur de dev (Turbopack)- 🏗️ build: compile le projet (production)
- 🚀 start: démarre le serveur Next.js en mode production
- 🧹 lint: exécute ESLint
Aperçu des principaux éléments du dépôt:
.
├─ app/ # Routes App Router, pages, layouts, etc.
├─ components/ # Composants UI réutilisables
├─ lib/ # Utilitaires, fonctions partagées
├─ public/ # Assets statiques (images, favicons, ...)
├─ .gitignore
├─ components.json # Configuration UI (ex: shadcn/ui)
├─ eslint.config.mjs # ESLint (Next + TS)
├─ next-env.d.ts
├─ next.config.ts # Configuration Next.js
├─ package.json
├─ package-lock.json
├─ postcss.config.mjs # Config PostCSS pour Tailwind v4
├─ tsconfig.json # TypeScript config
├─ LICENSE
└─ README.md
- App Router (dossier
app/):- 🧩
layout.tsx: layout racine de l’application - 📄
page.tsx: page associée à la route/ - 🗂️ Structurez en sous-répertoires pour créer des routes imbriquées.
- 🧩
- Composants (
components/):- 🔁 Composants UI isolés et testables.
- 🧱 Utilisez
tailwind-mergepour composer proprement des classes Tailwind.
- Lib (
lib/):- 🧰 Fonctions utilitaires (formatage, accès aux données, etc.).
- Style:
- 🎨 Tailwind CSS v4 via PostCSS, classes utilitaires directement dans les composants.
- Icônes:
- 🖼️
lucide-reactpour une librairie d’icônes légère et cohérente.
- 🖼️
Exécuter linter:
npm run lintRecommandations:
- ✅ Respecter les conventions TypeScript (types explicites, réutilisables).
- 🧠 Préférer des composants fonctionnels et éviter les effets de bord.
- ✂️ Découper en petits composants pour améliorer la lisibilité et les performances.
Le projet est conçu pour être déployé sur Vercel.
⤴️ Pousser la branche sur GitHub.- 🛬 Sur Vercel, importer le repo GitHub
Okpeyemi/negoce-ia. - 🔐 Définir les variables d’environnement nécessaires (ex: Supabase) dans les paramètres du projet Vercel.
- 🚀 Déployer. Vercel détectera Next.js et utilisera la configuration par défaut.
Raccourcis utiles:
- 🏠 Page d’accueil: https://negoce-ia.vercel.app
La dépendance @supabase/supabase-js (v2) est disponible pour interagir avec Supabase côté client.
Guidelines:
- 🗄️ Créez un projet Supabase pour obtenir:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY
- 🧱 Initialisez le client Supabase dans un utilitaire (ex:
lib/supabase.ts) pour le réutiliser dans vos composants. - 🛡️ Pour des opérations sensibles (insertions protégées, RLS, etc.), préférez des routes API/Server Actions (côté serveur) et des clés sécurisées (non exposées).
Exemple d’initialisation (à adapter):
// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'
export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)- Quelle version de Node utiliser ?
- 🟢 Node 18.18+ (Node 20 recommandé).
- Puis-je utiliser Yarn/Pnpm ?
- 📦 Le projet fournit un
package-lock.json, donc npm est recommandé pour un lockfile cohérent. Vous pouvez utiliser d’autres gestionnaires, mais restez consistant dans l’équipe.
- 📦 Le projet fournit un
- 🧱 Pages et composants applicatifs (selon les besoins du produit)
- 🎨 Configuration d’un thème/design system (ex: shadcn/ui)
- 🔐 Intégration Supabase avancée (auth, BDD, RLS)
- ✅ Tests (unitaires et e2e)
- 🔭 Observabilité (logs, métriques)
- ♿ Accessibilité (audit a11y)
- 🔎 SEO (métadonnées, Open Graph)
Les contributions sont les bienvenues !
- 🍴 Forkez le dépôt
- 🌱 Créez une branche:
git checkout -b feat/ma-fonctionnalite - 💬 Commitez:
git commit -m "feat: ajoute ma fonctionnalité" ⤴️ Poussez:git push origin feat/ma-fonctionnalite- 🔄 Ouvrez une Pull Request
Ce projet est sous licence MIT – voir le fichier LICENSE.
- GitHub: @Okpeyemi