如何将 SQLite 作为你的 Nextjs 项目数据库

type

status

date

slug

summary

Overview

通过几行命令和10分钟的时间，让你学会如何在 NextJS 项目中集成 Sqlite 数据库。

在接下来的内容中我们将会

创建一个 NextJS 项目

安装 Prisma

设置和启用SQLite

本教程主要面向初学者。如果其中的某些部分你已经非常熟悉，那么，请随意跳到本篇文章的任何一个部分。

简单来说，要使用sqlite，我们只需要执行两个关键操作：（1）更改schema文件中的db配置，使用“sqlite”作为provider，"file:./dev.db"作为url。（2）创建和迁移数据库npx prisma migrate dev --name init

前言

Sqlite

SQLite是一个轻量级的数据库管理系统，它将整个数据库存储在一个单一的磁盘文件中，不需要独立的服务器进程，适用于小型应用程序和移动设备。

SQLite 的优点在于轻量级和易于部署，不需要特别的配置和维护。可以直接在本地安装，可以快速从本地迁移到其他数据库。

但也有一些缺点，其中最突出的一点在于：sqlite并不适合搭配网站部署在vercel等无服务器网站托管平台上。

因为在vercel上，sqlite作为数据库是无法长期保存数据的——每当我们更新网站代码，vercel都会重新部署一次我们的项目，包括数据库。这会导致我们的数据库每一次更新代码后都会从零开始。

因此，sqlite作为数据库可能只适合储存那些不需要更新或和用户交互的数据（例如配方表、组合公式）。

vercel官方也推荐我们使用自己搭建的数据服务器，或者云数据库服务商提供的postgre等数据库。目前主流的 Prisma + 云数据库解决方案已经可以做到和配置sqlite一样简单。

如果你确实需要 prisma + 云数据库的解决方案，后续我也会再出一篇教程。（流程和本次教程大同小异，只需要改动几行配置，就能让你使用各大流行云服务商的云数据库）

但无论如何，如果我们的使用场景不涉及用户数据保存或收集上传文件等需要数据库的频繁更新的情况，而只是需要保存一些初始便设计好的数据表用来检索。那么SQLite依然是一个很好的选择。

Prisma

Prisma是一个开源的数据库工具，它提供了一个现代的、基于GraphQL的查询和操作数据库的方式，旨在简化数据库访问和数据管理过程。

它语句简单好理解，非常适合用于Nextjs等前端框架。

关于Prisma全栈项目，非常推荐来自脚本之家的这篇文章，虽然是Remix框架而不是NextJS框架，但“prisma+数据库“的使用方式是共通的。

全栈轻量级搭配之Remix Prisma Sqlite使用分析_React_脚本之家

这篇文章主要为大家介绍了全栈轻量级搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

https://www.jb51.net/article/283426.htm#_lab2_2_4

1. 创建新的 NextJS 项目

Getting Started: Installation

Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.

https://nextjs.org/docs/getting-started/installation

这一步是新建一个小白鼠项目，如果你已经有了一个现成的项目，尽管使用它（如果担心操作出现失误，记得备份原文件，或者直接创建新的项目吧）

创建一个新的文件夹，创建新的nextjs项目，然后进入这个文件。（配置全部采用默认设置）

./

或者，你已经创建了文件夹，你可以直接在这个文件夹中创建（我比较喜欢这个方式）

./your_project_name

然后，安装默认依赖。

2. 初始化Prisma

Quickstart with TypeScript & SQLite

Get started with Prisma ORM in 5 minutes. You will learn how to send queries to a SQLite database in a plain TypeScript script using Prisma Client.

https://www.prisma.io/docs/getting-started/quickstart

安装prisma：

安装使用时会用到的客户端组件。

生成prisma文件

这之后，你可以发现我们多了两个文件夹和文件

./prisma/schema.prisma ：这个文件是我们设置数据库的主要阵地。

./env ：我们在这里配置数据库的url，它代表了数据库的地址，一般填云数据库的链接。但我们这次用的是本地的sqlite，因此这里可以填写文件夹路径，接下来会讲到。

3. 配置 SQLite 参数

点进./prisma/schema.prisma文件，让我们开始设置SQLite作为prisma使用的数据库。

首先再次提示，prisma自身不是一个数据库，因此我们需要将它连接到已有的数据库当中。它支持各种数据库，postgre、mysql、mongodb，以及sqlite。

事实上，prisma已经为我们集成了SQLite的创建和使用命令，我们可以只用简单的设置就可以使用sqlite作为我们的数据库。

接下来让我们开始配置，我们需要配置prisma连接的数据库路径。

datasource db 就是prisma连接数据库的方式，让我们更改provider url，将数据库设置到prisma文件夹下的./dev.db中（现在还没有，之后的操作中会自动生成）

设置model参数，这是在设置关系数据库的“实例”，也就是一般情况下我们所说的“表”的概念。

当然，prisma的语法和使用并不是我们的重点（虽然它在js项目中确实很好用），因此我们直接用官方文档中设计的两个表，添加到./prisma/schema.prisma文件的最后：

./prisma/schema.prisma

这里我们创建了两个表，分别是“User”表和”Post“表（代表“用户”和“发布”，也许用于博客平台）。

4. 通过 Prisma Migrate 命令创建数据库

已经配置好所有内容，我们可以开始创建了。

Prisma Migrate 命令被用来创建和迁移数据库，我们使用后再讲解

你可以观察到，prisma文件夹下多了四个文件：

根据官方文档，这个命令实际上做了三件事情：

它在 prisma/migrations 目录中为此迁移创建了一个新的 SQL 迁移文件。这个SQL文件放在文件夹20240406161359_init中，前缀是时间，后缀“init”是我们在命令中设定的，还记得吗（--name init）

它对数据库执行了 SQL 迁移文件。

它在运行了 prisma generate 命令（安装 @prisma/client 软件包并根据您的模型生成量身定制的 Prisma 客户端 API）。

但我们只关心其中的几个。

prisma\migrations\20240406161359_init\migration.sql 这是prisma进行迁移的sql命令文件。上面的命令自动生成了执行数据库迁移操作的sql命令文件（所以其实是通过sql进行数据处理的），并通过文件夹命名的方式记录这次迁移的时间和操作名字.

prisma\dev.db 这就是我们本地的sqlite数据库保存的位置

到这里，我们就已经完成了sqlite数据库的创建。

更深入的就是关于prisma在nextjs项目/js项目中使用相关的话题，让我们在下一篇文章中深入探讨这个话题，我们会在那里配置一些路径和函数支持我们在网页中连接和应用这个数据库。

因此在这篇文章的最后章节，让我们用更简单的方式验证数据库是否真的生效了——通过”prisma studio“命令简单地验证我们的数据库能否被正常使用。

5. 通过 Prisma Studio 测试数据库

使用 prisma studio 来快速测试你的数据库，我们可以像填写excel表格一样增删改查数据库中的数据，只需要一个简单的命令：

你会发现prisma自动打开了网页，网址为localhost/5555

这就是我们的数据库了，尝试创建数据。

进入user表，填写name，email（id留空，它是自增的，不需要填写）。

如果成功创建，那么恭喜你，这个数据库已经可用！