Configuration de Prisma et du modèle User

Dans cette leçon, tu vas apprendre à intégrer Prisma dans ton projet Next.js, configurer une base de données SQLite et définir un modèle User prêt pour l’authentification. On couvrira :

1. Initialisation de Prisma
2. Configuration de la base SQLite
3. Définition du schéma Prisma
4. Exécution d’une migration
5. Vérification avec Prisma Studio

Prérequis

• Node.js installé (>=16.x)
• Un projet Next.js initialisé (avec TypeScript de préférence)
• Familiarité basique avec la CLI et les fichiers .env

1. Initialiser Prisma

Pour démarrer, installe Prisma CLI et génère la configuration initiale.

1
npm install prisma --save-dev
2
npx prisma init

Cette commande crée :

• Un dossier prisma/ contenant schema.prisma
• Un fichier .env mis à jour avec DATABASE_URL

2. Configurer SQLite en développement

On va opter pour SQLite pour simplifier la configuration locale. Ouvre ton fichier .env et remplace la valeur par :

1
# Chemin vers le fichier SQLite en local
2
DATABASE_URL="file:./dev.db"

Pense à exclure dev.db de ton contrôle de version :

1
# Ignore la base SQLite générée
2
/dev.db

3. Définir le modèle User

Édite le schéma Prisma dans prisma/schema.prisma pour y ajouter ton modèle User :

1
generator client {
2
  provider = "prisma-client-js"
3
}
4

5
datasource db {
6
  provider = "sqlite"
7
  url      = env("DATABASE_URL")
8
}
9

10
model User {
11
  id       Int    @id @default(autoincrement())
12
  email    String @unique
13
  password String
14
}

// @callout: Le champ @unique garantit l’unicité de l’email // @callout: autoincrement() crée un ID numérique séquentiel

Cette simple définition crée un utilisateur avec :

• id : entier auto-incrémenté
• email : chaîne unique
• password : chaîne pour stocker le hash

4. Exécuter la migration

Maintenant, génère et applique une migration pour créer la table User dans ta base.

1
npx prisma migrate dev --name add-user

▶ Une nouvelle migration apparaît dans prisma/migrations/add-user/
▶ Le fichier dev.db est créé automatiquement

À chaque changement de schéma, répète cette commande pour préserver l’historique des migrations.

5. Vérifier avec Prisma Studio

Pour explorer visuellement ta base et t’assurer que tout est en place, lance Prisma Studio :

1
npx prisma studio

Tu devrais voir la table User vide. Tu peux y insérer manuellement un utilisateur pour tester.

6. Installer le client Prisma

Enfin, installe le client généré par Prisma pour l’utiliser dans ton code Next.js :

1
npm install @prisma/client

Puis crée une instance que tu pourras importer partout :

1
import { PrismaClient } from '@prisma/client'
2

3
export const prisma = new PrismaClient()

Points clés

• npx prisma init génère la config et le fichier .env
• SQLite (file:./dev.db) est parfait pour démarrer en local
• Définir un modèle dans schema.prisma déclenche la création de la table
• Les migrations (prisma migrate dev) maintiennent l’historique du schéma
• Prisma Studio est un outil visuel très pratique

Exercices

1. Ajouter un champ name

   • Modifie schema.prisma pour ajouter name String? dans model User.
   • Lance une migration prisma migrate dev --name add-name.
   • Vérifie la colonne dans Prisma Studio.

2. Seed de données

   • Crée prisma/seed.ts où tu importes prisma et insères deux utilisateurs.
   • Ajoute un script npm "seed": "tsx prisma/seed.ts" et exécute-le.
   • Vérifie dans Studio que les utilisateurs existent.

3. Changer de provider

   • Configure PostgreSQL local ou via Docker.
   • Mets à jour DATABASE_URL dans .env.
   • Ajuste provider = "postgresql" dans schema.prisma.
   • Génère une nouvelle migration et vérifie la connexion.