Ce projet est une application de tableau de bord complète réalisée dans le cadre du cours Next.js App Router. Il démontre l'utilisation des fonctionnalités modernes de Next.js pour créer une application web performante et sécurisée.
- Dashboard : Vue d'ensemble des revenus, des factures et des clients.
- Authentification : Gestion des sessions avec Auth.js (NextAuth.js v5).
- Gestion des Factures : Création, modification et suppression de factures (CRUD).
- Recherche et Pagination : Filtrage dynamique des données côté serveur.
- Validation de formulaires : Gestion des erreurs avec Zod.
- Optimisation des performances : Utilisation de Server Components, Streaming, et Partial Prerendering (PPR).
- Base de données : Intégration avec PostgreSQL via Vercel Postgres.
- Stylisation : Design moderne et responsive avec Tailwind CSS.
Si vous ne l'avez pas encore fait, clonez le dépôt et accédez au dossier :
cd nextjs-dashboardLe projet utilise pnpm comme gestionnaire de paquets :
pnpm installRenommez le fichier .env.example en .env à la racine du projet :
cp .env.example .envRemplissez les variables d'environnement suivantes :
- Créez un projet sur Vercel.
- Dans l'onglet Storage, créez une base de données Postgres (Neon ou Supabase).
- Copiez les informations de l'onglet
.env.localde Vercel dans votre fichier.env.
Générez une clé secrète pour AUTH_SECRET afin de sécuriser les sessions :
- macOS / Linux :
openssl rand -base64 32 - Windows : Utilisez generate-secret.vercel.app/32
Ajoutez la clé générée dans votre .env :
AUTH_SECRET=votre_cle_secrete_icipnpm devOuvrez http://localhost:3000 dans votre navigateur pour voir le résultat.
Pour tester l'application, vous pouvez utiliser le compte suivant :
- Email :
user@nextmail.com - Mot de passe :
123456
Ce projet a été initialisé avec la commande :
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpmPour plus de détails sur l'implémentation, consultez le curriculum du cours.