TiDB-Prisma-Vercel 示例项目教程

1. 项目的目录结构及介绍

tidb-prisma-vercel-demo/
├── package.json
├── prisma/
│   ├── schema.prisma
│   └── migrations/
├── public/
│   └── ...
├── scripts/
│   └── setup.mjs
├── src/
│   ├── pages/
│   │   ├── api/
│   │   │   └── ...
│   │   └── index.tsx
│   ├── styles/
│   │   └── globals.css
│   └── ...
└── ...

目录结构说明

• package.json: 项目的依赖和脚本配置文件。
• prisma/: Prisma 相关的文件，包括数据库 schema 和迁移脚本。
  • schema.prisma: 定义数据库模型和 Prisma 客户端的配置。
  • migrations/: 包含数据库迁移的历史记录和脚本。
• public/: 静态资源文件夹，存放图片、字体等静态文件。
• scripts/: 自定义脚本文件夹，例如 setup.mjs 用于项目初始化。
• src/: 源代码文件夹，包含页面、API 路由和样式文件。
  • pages/: Next.js 页面和 API 路由。
    • api/: API 路由文件夹。
    • index.tsx: 首页组件。
  • styles/: 全局样式文件。

2. 项目的启动文件介绍

package.json 中的启动脚本

{
  "scripts": {
    "build": "prisma generate && next build",
    "dev": "next dev",
    "prisma:deploy": "prisma migrate deploy",
    "prisma:generate": "prisma generate",
    "setup": "NODE_OPTIONS='--experimental-json-modules' node /scripts/setup.mjs",
    "start": "next start",
    "vercel-build": "export DATABASE_URL=$(node /scripts/env.mjs) && yarn run prisma:deploy && yarn run setup && yarn run build"
  }
}

启动脚本说明

• build: 生成 Prisma 客户端并构建 Next.js 项目。
• dev: 启动开发服务器。
• prisma:deploy: 部署 Prisma 迁移。
• prisma:generate: 生成 Prisma 客户端。
• setup: 运行项目初始化脚本。
• start: 启动生产环境服务器。
• vercel-build: 在 Vercel 上构建项目。

3. 项目的配置文件介绍

package.json

{
  "name": "tidb-prisma-vercel-demo",
  "version": "1.0.0",
  "private": true,
  "engines": {
    "node": ">=18.0.0"
  },
  "dependencies": {
    "@faker-js/faker": "^7.6.0",
    "@heroicons/react": "^2.0.18",
    "@mui/lab": "^5.0.0-alpha.93",
    "@prisma/client": "^4.5.0",
    "@tailwindcss/typography": "^0.5.9",
    "axios": "^1.1.3",
    "dotenv": "^16.0.3",
    "lodash": "^4.17.21"
  }
}

配置文件说明

• name: 项目名称。
• version: 项目版本。
• private: 是否为私有项目。
• engines: 指定 Node.js 版本。
• dependencies: 项目依赖包及其版本。

prisma/schema.prisma

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

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

model Book {
  id        Int      @id @default(autoincrement())
  title     String
  author    String
  category  String
  rating    Float