vibecoding中的数据库快速设置

type

status

date

slug

summary

📝 数据库的基础知识

关于数据库的一些名词解释

需要首先了解一些专业术语

neon

supabase

MySQL

PostgreSQL

关系型数据库/非关系型数据库

MongoDB

Redis

Prisma

Drizzle

schema

API

增删改查（CRUD）

Navicat Premium Lite

数据库服务商/云平台

Neon

一个现代化的 PostgreSQL 云数据库平台

提供分支功能，可以像 Git 一样管理数据库版本

支持无服务器架构，按需扩展

Supabase

开源的 Firebase 替代品

基于 PostgreSQL，提供实时数据库、认证、存储等功能

被称为"开源版 Firebase"

数据库系统

MySQL

最流行的开源关系型数据库之一

广泛用于 Web 应用开发

由 Oracle 公司维护

PostgreSQL

功能强大的开源关系型数据库

支持复杂查询和高级数据类型

被认为是最先进的开源数据库

关系型数据库 vs 非关系型数据库

关系型数据库：数据以表格形式存储，有固定的结构（schema），支持 SQL 查询。如 MySQL、PostgreSQL

非关系型数据库：数据存储更灵活，包括文档型、键值型、图形型等。如 MongoDB、Redis

MongoDB

文档型 NoSQL 数据库

以 JSON 格式存储数据

适合快速开发和处理非结构化数据

Redis

内存型键值数据库

主要用于缓存和会话存储

速度极快，但数据存储在内存中

数据库工具和框架

Prisma

现代化的数据库 ORM（对象关系映射）工具

提供类型安全的数据库访问

支持多种数据库，有强大的开发者体验

Drizzle

轻量级的 TypeScript ORM

注重性能和类型安全

比 Prisma 更接近原生 SQL

Schema

数据库的结构定义

包括表结构、字段类型、约束条件等

相当于数据库的"蓝图"

核心概念

API（Application Programming Interface）

应用程序编程接口

允许不同软件之间进行通信的桥梁

在数据库上下文中，通常指访问数据库的接口

增删改查（CRUD）

增：Create（创建/插入数据）

删：Delete（删除数据）

改：Update（更新/修改数据）

查：Read（读取/查询数据）

这是数据库操作的四个基本功能

Navicat Premium Lite

数据库管理工具

提供图形化界面来管理多种类型的数据库

支持 MySQL、PostgreSQL、MongoDB 等

Lite 版本是免费的简化版

这些术语构成了现代数据库开发的基础知识体系。理解它们有助于你更好地选择合适的数据库技术栈。

Next.js 数据库操作流程层级图

一般需要考虑到这六个层级的事情

📱 前端层 (Frontend Layer)

用户界面 (UI Components)
    ↓
React 组件状态管理
    ↓
事件处理 (onClick, onSubmit 等)

🌐 API 层 (API Layer)

Frontend 发起请求
    ↓
HTTP 请求 (GET/POST/PUT/DELETE)
    ↓
Next.js API Routes (/pages/api/ 或 /app/api/)
    ↓
路由处理函数 (handler function)

🔧 业务逻辑层 (Business Logic Layer)

请求验证 & 数据校验
    ↓
身份认证 & 权限检查
    ↓
业务规则处理
    ↓
数据转换 & 格式化

🗂️ 数据访问层 (Data Access Layer)

ORM/查询构建器选择
    ↓
┌─────────────┬─────────────┬─────────────┐
│   Prisma    │   Drizzle   │  直接 SQL   │
└─────────────┴─────────────┴─────────────┘
    ↓
Schema 定义 & 类型生成
    ↓
查询语句构建

🛠️ 数据库连接层 (Database Connection Layer)

连接池管理
    ↓
数据库驱动程序
    ↓
┌─────────────┬─────────────┬─────────────┐
│ PostgreSQL  │   MySQL     │  MongoDB    │
│   Driver    │   Driver    │   Driver    │
└─────────────┴─────────────┴─────────────┘

🏗️ 数据库服务层 (Database Service Layer)

云数据库平台
    ↓
┌─────────────┬─────────────┬─────────────┐
│   Supabase  │    Neon     │ PlanetScale │
└─────────────┴─────────────┴─────────────┘
    ↓
实际数据库引擎
    ↓
┌─────────────┬─────────────┬─────────────┐
│ PostgreSQL  │   MySQL     │  MongoDB    │
└─────────────┴─────────────┴─────────────┘

🚀 开发流程中的文件修改顺序，需要考虑的层面

📄 .env.local - 配置数据库连接

📄 prisma/schema.prisma - 定义数据模型

📄 lib/prisma.ts - 配置数据库客户端

**📄 types/*.ts** - 定义 TypeScript 类型

📄 lib/validations.ts - 设置数据验证规则

**📄 services/*.ts** - 编写业务逻辑

**📄 app/api/*/route.ts** - 创建 API 端点

nextjs_api_routes_examples.ts

13.3 KB

**📄 hooks/*.ts** - 创建数据获取 Hook

**📄 components/*.tsx** - 构建 UI 组件

**📄 app/*/page.tsx** - 创建页面组件

📄 package.json (关键依赖)

这个文件结构涵盖了从数据库到用户界面的完整技术栈，每个文件都有明确的职责和作用。

🤗 数据库实操

第一项：neon+prisma

注册数据库，并且得到密匙，让项目连接数据库

安装prisma，连接数据库

设置数据表，并推送同步

在项目中运行

创建 Prisma 客户端单例，src/lib/prisma.ts

这个文件的作用

生成并导出 Prisma 客户端的单例，避免在开发环境热重载或无服务器环境中创建过多数据库连接。

统一配置 Prisma（日志、调优等），供服务端代码复用。

为什么需要单例

开发模式下，Next.js 会频繁热重载；每次 new PrismaClient() 都会开新连接，最终耗尽连接池（Neon 免费层尤甚）。

用全局变量缓存实例，可确保“只创建一次”，后续导入直接复用。

首次导入时创建 PrismaClient。

非生产环境把实例挂到 global，避免热重载重复创建。

生产环境下依赖模块缓存，通常也只会实例化一次。

如何使用

仅在服务端使用：Route Handlers、Server Actions、Server Components。

导入即用：typescript

import { prisma } from '@/lib/prisma';

const data = await prisma.productSku.findMany();

注意

不要在客户端组件或浏览器代码中使用 Prisma（它是服务器端库）。

确保 .env 的 DATABASE_URL 正确，Neon 建议加 sslmode=require。

创建API，按照需求完成增删改查

💡

C增： const created = await prisma.productSku.create({ }）

D删： await prisma.productSku.delete({ where: { id: s.id } });

U改： const updated = await prisma.productSku.update({ }）

R查： const skus = await prisma.productSku.findMany({ orderBy: { createdAt: 'desc' } });

完善前端，配合增删改查（前端也可以直接完成删除）

新建 src/app/skus/page.tsx（服务器组件 + 客户端交互）：

第二项：supabase+drizzle

安装命令：

主依赖：pnpm add drizzle-orm
开发依赖：pnpm add drizzle-kit -D

目录结构：在src/server/db/下创建schema.ts文件

drizzle（TS原生）和prisma（专门抽象了一份语法适配TS）的区别，他们俩都有GUI，DEVTOOL，megration/push/pull，可以更好的同步管理数据库。不同点在于，drizzle的数据库的管理更加偏向于，sql like function，而prisma syntax，导致prisma的学习成本会高一些。drizzle成本比较低。severless driver 这个很好更快，本质上区别不大就。

prisma的争议是简单背后的问题，但是确实是简单。

🤗 数据库的实战教程！（搭建一个自己的电商数据管理系统）

📎 自己部署+驱动服务器的流程dekpoly

一些引用

引用文章

📎 参考资料

程普的Nexty.dev 使用文档数据库操作 | Nexty.dev 使用文档
数据库操作 | Nexty.dev 使用文档
详细介绍 Supabase 数据库操作方法和最佳实践。
Nexty.dev 使用文档

deizzle的文档

💡

有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~

📝 数据库的基础知识

关于数据库的一些名词解释

数据库服务商/云平台

数据库系统

数据库工具和框架

核心概念

Next.js 数据库操作流程层级图

🚀 开发流程中的文件修改顺序，需要考虑的层面

📄 .env.local - 配置数据库连接

📄 prisma/schema.prisma - 定义数据模型

📄 lib/prisma.ts - 配置数据库客户端

**📄 types/*.ts** - 定义 TypeScript 类型

📄 lib/validations.ts - 设置数据验证规则

**📄 services/*.ts** - 编写业务逻辑

**📄 app/api/*/route.ts** - 创建 API 端点

**📄 hooks/*.ts** - 创建数据获取 Hook

**📄 components/*.tsx** - 构建 UI 组件

**📄 app/*/page.tsx** - 创建页面组件

📄 package.json (关键依赖)

🤗 数据库实操

第一项：neon+prisma

这个文件的作用

为什么需要单例

如何使用

注意

第二项：supabase+drizzle

🤗 数据库的实战教程！（搭建一个自己的电商数据管理系统）

📎 自己部署+驱动服务器的流程dekpoly

📎 参考资料

Luolink

交流频道

加入我们的社群讨论分享

📝 数据库的基础知识

关于数据库的一些名词解释

数据库服务商/云平台

数据库系统

数据库工具和框架

核心概念

Next.js 数据库操作流程层级图

🚀 开发流程中的文件修改顺序，需要考虑的层面

📄 .env.local - 配置数据库连接

📄 prisma/schema.prisma - 定义数据模型

📄 lib/prisma.ts - 配置数据库客户端

📄 types/*.ts - 定义 TypeScript 类型

📄 lib/validations.ts - 设置数据验证规则

📄 services/*.ts - 编写业务逻辑

📄 app/api/*/route.ts - 创建 API 端点

📄 hooks/*.ts - 创建数据获取 Hook

📄 components/*.tsx - 构建 UI 组件

📄 app/*/page.tsx - 创建页面组件

📄 package.json (关键依赖)

🤗 数据库实操

第一项：neon+prisma

这个文件的作用

为什么需要单例

如何使用

注意

第二项：supabase+drizzle

🤗 数据库的实战教程！（搭建一个自己的电商数据管理系统）

📎 自己部署+驱动服务器的流程dekpoly

📎 参考资料

Luolink

交流频道

加入我们的社群讨论分享

**📄 types/*.ts** - 定义 TypeScript 类型

**📄 services/*.ts** - 编写业务逻辑

**📄 app/api/*/route.ts** - 创建 API 端点

**📄 hooks/*.ts** - 创建数据获取 Hook

**📄 components/*.tsx** - 构建 UI 组件

**📄 app/*/page.tsx** - 创建页面组件