前言

学习全栈框架 Next.js 必然离不开数据库，因为我们毕竟要把数据存储到数据库中。而选择数据库有很多种方案，像关系型数据库 MySQL、PostgreSQL，非关系型数据库 MongoDB 等。

在 Next.js 技术栈中选择较多的是关系型数据库 PostgreSQL，这是因为 Supabase 使用 PostgreSQL 作为数据库。Supabase 是建立在 Postgres 之上的，Postgres 是一个免费的开源数据库，被认为是世界上最稳定、最先进的数据库之一。通过使用 Supabase，作为开发人员的我们可以专注于编写前端应用程序代码，而无需管理服务器、虚拟机或容器，从而保持应用程序的正常运行。

接下来以云数据库 Supabase 为例在 Next.js 中集成 PostgreSQL。

集成数据库

登录 Supabase

首先，登录 Supabase 官网，创建一个账号，也可以直接使用 Github 账号登录。

然后，需要我们先创建一个组织，再创建项目。

创建项目名称的时候，有一个数据库密码的选项，你可以自己输入，也可以让系统帮我们生成。

创建完成之后点击最右侧的 Connect 按钮，就会显示一个用于连接线上数据库的 URI，在 Next.js 中我们需要这个地址用于连接数据库。

安装 Prisma ORM

具体的 Prisma ORM 使用方式，可参考 Prisma 中文文档

首先，在项目根目录中的终端命令行依次输入：npm i prisma --save-dev npm i @prisma/client。

然后，在项目根目录创建 .env 文件，如果有就不用创建。接着在 .env 文件中输入上述 Supabase 帮我们生成的用于连接数据库的 URI。

建议将 .env 添加到 .gitignore 文件中，以防止提交环境变量

值得注意的是，要把 URI 中的 [YOUR-PASSWORD] 替换为上述在 Supabase 中创建项目时设置的数据库密码。

DATABASE_URL="postgres://postgres.eaarkqokspheieffjkux:[YOUR-PASSWORD]@aws-0-ap-southeast-1.pooler.supabase.com:5432/postgres"

其次，在项目根目录创建一个名称为 prisma 的文件夹，接着在里面创建 schema.prisma 文件，在文件中输入以下内容：

generator client {
  provider = "prisma-client-js"
}

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

// 数据模型
model Doc {
  id         Int        @id @default(autoincrement())
  title      String
  content    String
  createdAt  DateTime   @default(now())
  updatedAt  DateTime   @updatedAt
}

最后，在 package.json 中增加如下脚本：

 "scripts": {
    "db:push": "prisma db push"
  }

在终端命令行输入：npm run db:push，如果没有报错，则表示创建成功。

此时可以登录 Supabase 官网，查看数据表是否与我们定义的模型相同。

最终，数据库已经连通，我们可以参考 Prisma 中文文档进行一些增删改查的相关操作。

总结

目前，在 Next.js 中操作数据库最流行的方式是使用 ORM 来操作数据库，而不是使用原始的 SQL 语句来操作数据库。使用原始 SQL 虽然可以完全控制数据库的操作，但是生产力会受到影响，因为将纯 SQL 字符串发送到数据库非常麻烦，并且会带来大量开销。

ORM 又叫对象关系映射，使用 ORM 来操作数据库不仅能简化开发流程、提高代码可读性和可维护性、增强应用程序的灵活性和可移植性，同时还能防止SQL注入。

因此在 Next.js 项目中我们采用 Prisma ORM 来集成 PostgreSQL 数据库。

但是并不是在所有场景下都建议使用 ORM 来操作数据库，如在需要执行复杂的数据库操作时，直接使用 SQL 可能更加高效和灵活。

在 Next.js 中使用 Prisma 集成数据库

前言

集成数据库

登录 Supabase

安装 Prisma ORM

总结