Backoffice

Initialiser le projet Next.js

Un projet Next.js qui démarre en local, avec Tailwind et shadcn/ui prêts à l'emploi.

Prérequis : Node.js installé. Terminal ouvert dans le dossier du projet.

1. Installe pnpm si besoin

   npm install -g pnpm

   pnpm est le gestionnaire de paquets choisi pour ce projet — plus rapide et plus économe en espace disque que npm.
   👁 Comment voir le résultat : tape pnpm -v. Un numéro de version s'affiche (ex. 9.12.0) — sinon l'installation a échoué.
2. Crée le projet Next.js

   pnpm create next-app@latest . --typescript --tailwind --eslint --app --src-dir=false --import-alias "@/*"

   Le nom du dossier ne doit pas contenir de majuscules (contrainte npm). S'il en contient, crée le projet dans un dossier temporaire au nom valide puis déplace tout son contenu dans ton dossier de travail.
   👁 Comment voir le résultat : tape ls. Tu dois voir apparaître app/, package.json, tailwind.config.ts — la commande a rempli ton dossier de fichiers.
3. Initialise shadcn/ui

   pnpm dlx shadcn@latest init

   Ça crée components.json et lib/utils.ts, et prépare Tailwind pour recevoir des composants shadcn/ui prêts à copier.
   👁 Comment voir le résultat : tape ls components.json lib/utils.ts — les deux fichiers doivent exister, sans message d'erreur « No such file ».
4. Crée l'arborescence du projet

   mkdir -p lib/auth lib/db lib/validations prisma tests

   On sépare dès le départ : authentification, accès base de données, schémas de validation. Ça évite le fichier fourre-tout de 2000 lignes plus tard.
   👁 Comment voir le résultat : tape ls lib — les dossiers auth, db, validations doivent apparaître.
5. Initialise Git et fais le premier commit

   git init
   git add -A
   git commit -m "chore: init projet Next.js"

   👁 Comment voir le résultat : tape git log --oneline — une ligne avec ton message de commit doit s'afficher.
6. Lance le serveur et vérifie

   pnpm dev

   Ouvre http://localhost:3000. Si tu as une erreur 500 mentionnant un module introuvable (ex. Can't resolve 'xxx') alors qu'il est bien dans package.json : supprime node_modules, pnpm-lock.yaml et .next, relance pnpm install puis pnpm dev. C'est presque toujours une installation incomplète, pas un bug de code.
   👁 Comment voir le résultat : dans ton navigateur, ouvre localhost:3000. Tu dois voir la page d'accueil par défaut de Next.js (logo, liens « Docs », « Deploy »). Le terminal affiche Ready et n'affiche pas d'erreur rouge.

Base de données — Prisma + Supabase

Une base PostgreSQL en ligne, avec une table Produit créée via Prisma.

Prérequis : étape 1 validée.

1. Crée un projet sur Supabase
   Va sur supabase.com → New project. Choisis un nom, une région proche, et un mot de passe de base de données — note-le quelque part.
   👁 Comment voir le résultat : le tableau de bord Supabase affiche ton projet avec un statut « Active » (après ~1-2 minutes d'initialisation).
2. Récupère l'URL de connexion
   Dans le projet Supabase : Project Settings → Database → Connection string, mode URI. Copie l'URL complète (mot de passe inclus).
3. Installe Prisma

   pnpm add prisma --save-dev
   pnpm add @prisma/client
   pnpm dlx prisma init

   Crée prisma/schema.prisma et un fichier .env avec une variable DATABASE_URL vide.
   👁 Comment voir le résultat : tape ls prisma/schema.prisma — le fichier doit exister.
4. Colle l'URL dans .env

   # .env
   DATABASE_URL="postgresql://postgres:[MOT-DE-PASSE]@[HOST]:5432/postgres"

   Ce fichier ne doit jamais être commit (déjà dans .gitignore par défaut) — il contient un mot de passe.
5. Écris le schéma
   Dans prisma/schema.prisma, sous les blocs generator/datasource déjà présents, ajoute :

   model Produit {
     id        String   @id @default(cuid())
     nom       String
     quantite  Int      @default(0)
     prix      Float
     categorie String?
     updatedAt DateTime @updatedAt
   }

   Remplace par les champs de tes propres données — un backoffice de clients, d'articles, de commandes suivra exactement le même schéma de raisonnement.
6. Applique la migration et vérifie

   pnpm dlx prisma migrate dev --name init
   pnpm dlx prisma studio

   migrate dev crée les tables et génère le client Prisma typé. studio ouvre une interface web locale pour voir/éditer les données à la main.
   👁 Comment voir le résultat : prisma studio ouvre localhost:5555 dans ton navigateur — la table Produit doit apparaître dans la liste de gauche, vide mais avec ses colonnes (nom, quantite, prix...).

Piège fréquent : connexion refusée → vérifie qu'aucun caractère spécial du mot de passe (@, #...) n'est mal encodé dans l'URL. Supabase propose un bouton pour copier l'URL déjà encodée.

Authentification — Better Auth

S'inscrire, se connecter, et protéger /dashboard des visiteurs non connectés.

Prérequis : étape 2 validée (schéma Prisma en place). Si l'outil est utilisé par toute l'équipe sans distinction d'accès, tu peux sauter cette étape.

1. Installe Better Auth

   pnpm add better-auth

   👁 Comment voir le résultat : better-auth apparaît dans package.json.
2. Crée la config serveur

   // lib/auth/auth.ts
   import { betterAuth } from "better-auth";
   import { prismaAdapter } from "better-auth/adapters/prisma";
   import { prisma } from "@/lib/db/client";
   
   export const auth = betterAuth({
     database: prismaAdapter(prisma, { provider: "postgresql" }),
     emailAndPassword: { enabled: true },
   });

   Crée aussi lib/db/client.ts qui exporte une instance unique de PrismaClient — évite d'en recréer une à chaque appel.
3. Ajoute les tables auth au schéma

   pnpm dlx @better-auth/cli generate
   pnpm dlx prisma migrate dev --name add_auth

   Better Auth génère automatiquement les modèles User, Session, Account dans schema.prisma.
   👁 Comment voir le résultat : ouvre prisma studio — les tables User, Session, Account doivent maintenant apparaître dans la liste.
4. Ajoute le secret dans .env

   # .env
   BETTER_AUTH_SECRET="génère une chaîne aléatoire longue"
   BETTER_AUTH_URL="http://localhost:3000"

5. Crée la route API

   // app/api/auth/[...all]/route.ts
   import { auth } from "@/lib/auth/auth";
   import { toNextJsHandler } from "better-auth/next-js";
   
   export const { GET, POST } = toNextJsHandler(auth);

   👁 Comment voir le résultat : relance pnpm dev et ouvre localhost:3000/api/auth/ok (ou tout endpoint Better Auth valide) — tu dois obtenir une réponse JSON, pas une erreur 404.
6. Crée le client auth et les pages
   Un fichier lib/auth/client.ts avec createAuthClient(), puis des pages /signup et /login qui appellent authClient.signUp.email(...) et authClient.signIn.email(...).
   👁 Comment voir le résultat : ouvre localhost:3000/signup, crée un compte test. Puis ouvre prisma studio — une ligne doit apparaître dans la table User.
7. Protège /dashboard
   Un middleware.ts à la racine qui vérifie la session sur les routes /dashboard/* et redirige vers /login si absente.
   👁 Comment voir le résultat : ouvre un navigateur en navigation privée (pas connecté) et va sur localhost:3000/dashboard — tu dois être redirigé vers /login, pas voir le contenu du dashboard.

Piège fréquent : si la doc officielle de Better Auth diffère de ce qui est écrit ici, suis la doc — c'est une librairie qui évolue vite. Dis-le moi si un nom de fonction a changé, on ajuste.

CRUD Produits

Créer, lister, modifier et supprimer un produit depuis /dashboard.

Prérequis : étape 3 validée (ou étape 2 si tu as sauté l'authentification).

1. Ajoute des composants shadcn/ui

   pnpm dlx shadcn@latest add button input table

   👁 Comment voir le résultat : ls components/ui — button.tsx, input.tsx, table.tsx doivent apparaître.
2. Valide les entrées avec Zod

   // lib/validations/produit.ts
   import { z } from "zod";
   export const produitSchema = z.object({
     nom: z.string().min(1).max(80),
     quantite: z.number().int().min(0),
     prix: z.number().positive(),
     categorie: z.string().optional(),
   });

   👁 Comment voir le résultat : pas d'effet visible seul — ce schéma sera testé concrètement à l'étape suivante, en soumettant un formulaire invalide.
3. Écris les Server Actions

   // app/dashboard/produits/actions.ts
   "use server";
   // createProduit(formData): valide avec produitSchema, prisma.produit.create(...)
   // updateProduit(id, formData): idem, prisma.produit.update(...)
   // deleteProduit(id): prisma.produit.delete(...)

   Si tu as activé Better Auth, vérifie la session avant chaque écriture — sinon n'importe qui avec l'URL peut modifier les données.
4. Construis la page /dashboard/produits
   Un tableau (prisma.produit.findMany()), un formulaire d'ajout, un bouton modifier/supprimer par ligne.
   👁 Comment voir le résultat : ouvre localhost:3000/dashboard/produits, ajoute un produit test via le formulaire — il doit apparaître dans le tableau sans recharger la page manuellement. Vérifie aussi dans Prisma Studio que la ligne existe bien en base.

Déploiement — Vercel

Une URL publique et fonctionnelle.

Prérequis : étape 4 validée.

1. Ajoute la génération Prisma au build

   // package.json
   "scripts": { "postinstall": "prisma generate" }

   Sans ça, le build Vercel plante — le client Prisma doit être régénéré après chaque install en production.
2. Pousse le code sur GitHub

   git remote add origin URL-DE-TON-DEPOT
   git push -u origin master

   👁 Comment voir le résultat : rafraîchis la page du dépôt sur GitHub — tes fichiers doivent y apparaître.
3. Importe le projet sur Vercel
   Sur vercel.com → Add New → Project → sélectionne le dépôt GitHub.
   👁 Comment voir le résultat : le tableau de bord Vercel passe de « Building » à « Ready », avec un lien de prévisualisation cliquable.
4. Renseigne les variables d'environnement
   Copie DATABASE_URL, BETTER_AUTH_SECRET, BETTER_AUTH_URL (mets l'URL Vercel finale) dans Settings → Environment Variables.
   👁 Comment voir le résultat : pas d'effet visible immédiatement — redéploie (« Redeploy ») puis teste la connexion en production à l'étape suivante.
5. Déploie et vérifie en ligne
   Ouvre l'URL fournie par Vercel, refais le parcours critique à la main : créer un produit, le modifier, le supprimer.
   👁 Comment voir le résultat : sur l'URL *.vercel.app, connecte-toi, ajoute un produit — il doit apparaître dans le tableau exactement comme en local.