- 先打开supabase官网注册账号并创建一个项目，
- 安装prisma及相关依赖
npm install prisma --save-dev
npm install prisma tsx @types/pg --save-dev
npm install @prisma/client @prisma/adapter-pg dotenv pg
- 初始化prisma,可能会因为网络问题导致失败，重试几次，（运行时需要验证supabase账号）
npx prisma init --db --output ../app/generated/prisma
- 一个包含
schema.prisma文件的prisma目录。 - 一个用于配置 Prisma 的
prisma.config.ts文件 - 一个 Prisma Postgres 数据库。
- 项目根目录中包含
DATABASE_URL的.env文件。 - 生成的 Prisma Client 的
output目录为app/generated/prisma。
- 在prisma/schema.prisma中添加
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
authorId Int
author User @relation(fields: [authorId], references: [id])
}
-
将
dotenv添加到prisma.config.ts
import 'dotenv/config'
- 创建数据库表
npx prisma migrate dev --name init
- 然后生成 Prisma Client
npx prisma generate
-
填充数据库
添加一些填充数据以使用示例用户和帖子填充数据库。
在 prisma/ 目录中创建一个名为 seed.ts 的新文件
`import { PrismaClient, Prisma } from "../app/generated/prisma/client";
import { PrismaPg } from '@prisma/adapter-pg'
import 'dotenv/config'
const adapter = new PrismaPg({
connectionString: process.env.DATABASE_URL,
})
const prisma = new PrismaClient({
adapter,
});
const userData: Prisma.UserCreateInput[] = [
{
name: "Alice",
email: "alice@prisma.io",
posts: {
create: [
{
title: "Join the Prisma `Discord`",
content: "https://pris.ly/discord",
published: true,
},
{
title: "Prisma on YouTube",
content: "https://pris.ly/youtube",
},
],
},
},
{
name: "Bob",
email: "bob@prisma.io",
posts: {
create: [
{
title: "Follow Prisma on Twitter",
content: "https://www.twitter.com/prisma",
published: true,
},
],
},
},
];
export async function main() {
for (const u of userData) {
await prisma.user.create({ data: u });
}
}
main();`
现在，通过更新 prisma.config.ts 来告诉 Prisma 如何运行此脚本
import 'dotenv/config'
import { defineConfig, env } from 'prisma/config';
export default defineConfig({
schema: 'prisma/schema.prisma',
migrations: {
path: 'prisma/migrations',
seed: `tsx prisma/seed.ts`,
},
datasource: {
url: env('DATABASE_URL'),
},
});
最后，运行 prisma db seed，用我们在 seed.ts 文件中定义的初始数据填充你的数据库。
npx prisma db seed
并打开 Prisma Studio 检查您的数据
npx prisma studio
-
设置 Prisma Client
现在你已经有了一个包含一些初始数据的数据库，你可以设置 Prisma Client 并将其连接到你的数据库。
在你的项目根目录下，创建一个新的 lib 目录，并在其中添加一个 prisma.ts 文件。
import { PrismaClient } from '../app/generated/prisma/client'
import { PrismaPg } from '@prisma/adapter-pg'
const globalForPrisma = global as unknown as {
prisma: PrismaClient
}
const adapter = new PrismaPg({
connectionString: process.env.DATABASE_URL,
})
const prisma = globalForPrisma.prisma || new PrismaClient({
adapter,
})
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
export default prisma
此文件创建一个 Prisma Client 并将其附加到全局对象，以便你的应用程序中只创建一个客户端实例。这有助于解决在使用 Prisma ORM 和 Next.js 的开发模式下可能出现的热重载问题。
-
使用 Prisma ORM 查询你的数据库
这为你提供了一个带有标题和用户列表的基本页面。然而，该列表是静态的，包含硬编码值。让我们更新页面以从你的数据库中获取用户并使其动态化。
import prisma from '@/lib/prisma'
export default async function Home() {
const users = await prisma.user.findMany();
return (
<div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
<h1 className="text-4xl font-bold mb-8 font-[family-name:var(--font-geist-sans)] text-[#333333]">
Superblog
</h1>
<ol className="list-decimal list-inside font-[family-name:var(--font-geist-sans)]">
{users.map((user) => (
<li key={user.id} className="mb-2">
{user.name}
</li>
))}
</ol>
</div>
);
}
- 更多示例参考文档
