Développement Web
Votre application web adaptée
à tous vos besoins
Prendre rendez-vous
27/03/2025
Utiliser Prisma avec Next.js et React : Guide complet
Prisma est un ORM puissant qui simplifie considérablement la gestion des bases de données dans les projets JavaScript et TypeScript. Ce guide vous expliquera étape par étape comment intégrer Prisma dans une application Next.js 15 et React.
Découvre Prisma un ORM puissant qui simplifie considérablement la gestion des bases de données dans les projets JavaScript et TypeScript. Suis notre tutoriel étape par étape pour maîtriser l'intégration de Prisma dans une application Next.js 15 et React.
Sommaire
- Pourquoi choisir Prisma avec Next.js 15 ?
- Installation et configuration initiale
- Définir un modèle Prisma
- Gérer les données avec Prisma via Server Actions dans Next.js
- Intégration côté client avec React
- Sécurité
- Déploiement
- Conclusion
Pourquoi choisir Prisma avec Next.js 15 ?
Prisma offre une gestion simplifiée des requêtes et des schémas de données, une intégration fluide dans l'écosystème Next.js, et améliore la sécurité et les performances de vos applications.
Installation et configuration initiale
Créez votre application Next.js avec la commande :
1
2
npx create-next-app@latest my-prisma-app
cd my-prisma-appAjouter prisma et SQLite comme dépendances :
1
2
npm install prisma @prisma/client
npx prisma init --datasource-provider sqliteDéfinir un modèle Prisma
Editez le fichier schema.prisma pour définir vos modèles :
1
2
3
4
5
6
7
8
9
/* Ne pas toucher au code existant et ajouter un modèle Post */
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
createdAt DateTime @default(now())
}Puis générez le client Prisma :
1
npx prisma generateGérer les données avec Prisma via Server Actions dans Next.js
Créez des Server Actions pour gérer vos données, par exemple dans app/actions/posts.ts :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"use server";
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
export interface PostFormData {
title: string;
content?: string;
}
export async function fetchPosts(page: number = 1, pageSize: number = 10) {
return prisma.post.findMany({
skip: (page - 1) * pageSize,
take: pageSize,
});
}
export async function createPost(data: PostFormData) {
return prisma.post.create({ data });
}Intégration côté client avec React
Utilisez ces Server Actions directement dans vos composants React :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"use client";
import { useEffect, useState } from "react";
import { fetchPosts } from "@/app/actions/posts";
import { type Post } from "@/prisma.schema";
export default function Posts() {
const [posts, setPosts] = useState(Post[]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchPosts().then((data) => {
setPosts(data);
setLoading(false);
});
}, []);
if (loading) return <div>Chargement...</div>;
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}Sécurité
Validez toujours vos entrées côté serveur et utilisez des variables d'environnements pour gérer vos clés secrètes :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"use server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { type Post } from "@/prisma.schema";
const postSchema = z.object({
title: z.string().min(1),
content: z.string().optional(),
});
export async function secureCreatePost(data: Post) {
const validation = postSchema.safeParse(data);
if (!validation.success) {
throw new Error("Validation échouée");
}
return prisma.post.create({ data: validation.data });
}Déploiement
Pour déployer votre application, utilisez des services tels que Vercel, en assurant la gestion correcte des migrations Prisma :
1
npx prisma migrate deployConclusion
Tu as maintenant un environnement complet pour :
- Développer localement avec Next.js 15, Prisma et React.
- Gérer efficacement tes données et migrations via Prisma.
- Déployer facilement ton application sur Vercel ou d'autres plateformes à ta guise.
Bonne continuation ! 🐝
Discutons ensemble de votre projet !
