Discover Prisma, a powerful ORM that greatly simplifies database management in JavaScript and TypeScript projects. Follow our step-by-step tutorial to master Prisma integration in a Next.js 15 and React application.
Table of contents
- Why choose Prisma with Next.js 15?
- Initial installation and configuration
- Defining a Prisma model
- Managing data with Prisma through Server Actions in Next.js
- Client-side integration with React
- Security
- Deployment
- Conclusion
Why choose Prisma with Next.js 15?
Prisma provides simplified query and data schema management, seamless integration with the Next.js ecosystem, and improves the security and performance of your applications.
Initial installation and configuration
Create your Next.js application with the following command:
1
2
npx create-next-app@latest my-prisma-app
cd my-prisma-appAdd Prisma and SQLite as dependencies:
1
2
npm install prisma @prisma/client
npx prisma init --datasource-provider sqliteDefining a Prisma model
Edit the schema.prisma file to define your models:
1
2
3
4
5
6
7
8
9
/* Do not modify the existing code and add a Post model */
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
createdAt DateTime @default(now())
}Then generate the Prisma client:
1
npx prisma generateManaging data with Prisma through Server Actions in Next.js
Create Server Actions to manage your data, for example in 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 });
}Client-side integration with React
Use these Server Actions directly in your React components:
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>
);
}Security
Always validate your inputs on the server side and use environment variables to manage your secret keys:
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 });
}Deployment
To deploy your application, use services such as Vercel while ensuring proper Prisma migration management:
1
npx prisma migrate deployConclusion
You now have a complete environment to:
- Develop locally with Next.js 15, Prisma, and React.
- Efficiently manage your data and migrations with Prisma.
- Easily deploy your application on Vercel or any other platform of your choice.
Good luck! 🐝
