yyj's blog

在Next.js中利用Prisma连接数据库：

1、下载prisma包

npm i prisma

2、初始化prisma并关联数据库

这里以sqlite数据库做示例

npx prisma init --datasource-provider sqlite

正常的话多了一个prisma.config.ts文件和prisma文件夹

3、编写模型model

注意是在schema.prisma文件中

generator client {
  provider = "prisma-client-js"				// 使用标准的"prisma-client-js"而不是"prisma-client"
  // output  = "../src/generated/prisma"	// 注意这一行影响到数据库的导出，注释掉使用默认的输出路径
}

datasource db {
  provider = "sqlite"
  url    = env("DATABASE_URL")
}

// model示例
model Code {
  id    String  @id @default(cuid())
  title  String
  content String
  date   DateTime @default(now())
}

4、根据模型生成数据库表

npx prisma db push

执行以后如果控制台显示读取环境变量出错（Missing required environment variable: DATABASE_URL），可以显式加载，在文件prisma.config.ts头部引入：

import 'dotenv/config';

成功以后prisma文件夹下面多了一个数据库文件dev.db，需要用相关软件打开

5、生成Prisma Client

根据模型生成Prisma Client用于操作数据库

npx prisma generate

6、导出数据库

在src下面创建db/index.ts或者直接创建db.ts

import { PrismaClient } from '@prisma/client';

// 使用全局缓存，避免热重载时创建多个 PrismaClient 实例，把 index.ts 改为单例
declare global {
 var __prisma__: PrismaClient | undefined;
}

export const prismaDB = global.__prisma__ || new PrismaClient();

if (process.env.NODE_ENV !== 'production') {
 global.__prisma__ = prismaDB;
}

7、添加数据进行测试

可以直接在首页里面操作，导入数据库，利用prisma语法添加一条数据

import { prismaDB } from '@/db/index';

export default async function Home() {
 try {
  const created = await prismaDB.code.create({
   data: {
	title: 'Sample Code',
	content: 'This is a sample code snippet.',
   },
  });
  console.log('created:', created); // 服务器终端可见
 } catch (err) {
  console.error('create error:', err); // 服务器终端可见
 }
}

然后yarn dev进行启动，看看服务器终端是否有输出

8、查看数据库文件

这里用的是sqlite数据库，下载一个插件SQLite Viewer，可以直接在vscode里面打开prisma/dev.db，然后就能看到插入的数据了。

或者根据使用的数据库下载相应的软件来打开db类型的文件。

9、打包确认无误

最后执行yarn build && yarn start，看看项目是否能够正常构建和启动。这个时候如果出现eslint报错，记得忽略生成的目录src/generated/**（如果有的话，自己注意一下报错信息和文件位置），Next.js里的eslint配置文件是eslint.config.mjs

Next中使用Prisma