搭建Next项目（APP Router）并集成Prisma连接MySQL

皮皮艺术家
564 阅读3分钟

搭建Next项目

系统要求：Node.js18.17或更高的版本

自动安装

建议使用 create-next-app，若要创建项目，请运行：

npx create-next-app@latest

安装时，将看到以下提示：

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

在提示之后，将创建一个包含项目名称 my-app的文件夹，并安装所需依赖。

运行项目

  1. 运行 npm run dev 以启动开发服务器。
  2. 访问 http://localhost:3000
  3. 编辑 app/page.tsx 文件并保存在浏览器中查看更新的结果。

安装Prisma

系统要求：

所需的最低版本
Node.js16.13 / 18.X / 20.X
TypeScript（可选）4.7.X
yarn（可选）1.19.2

安装依赖

执行以下npm/yarn命令将Prisma CLI 作为开发依赖添加到项目中

npm install prisma --save-dev
yarn add prisma --dev

同时也需要安装 prisma/client

npm install @prisma/client
yarn add @prisma/client

初始化prisma

npx prisma init

此命令执行两项操作：

  • 创建一个名为Prisma的文件夹，该文件夹里面包含一个名为schema.prisma的文件，该文件用于数据库的连接和创建等
  • 在项目的根目录中创建了.env 文件，该文件用于定义环境变量（例如数据库连接）建议将.env文件添加到.gitignore文件中

连接数据库

注意，创建的默认架构使用的是PostgreSQL，所以需要先执行 prisma init``provider``mysql 此时，在.env里设置连接数据库的环境变量

DATABASE_URL="mysql//USER:PASSWORD@HOST:PORT/DATABASE"
  • USER：数据库用户的名称
  • PASSWORD：数据库用户的密码
  • PORT：运行数据库服务器的端口（通常用于 MySQL）3306
  • DATABASE：数据库的名称

使用Prisma Migrate

在数据库中创建表。根据以下Prisma数据模型在数据库中创建对应的表 在prisma/schema.prisma中

model Post {  
id Int @id @default(autoincrement())  
createdAt DateTime @default(now())  
updatedAt DateTime @updatedAt  
title String @db.VarChar(255)  
content String?  
published Boolean @default(false)  
author User @relation(fields: [authorId], references: [id])  
authorId Int  
}  
  
model Profile {  
id Int @id @default(autoincrement())  
bio String?  
user User @relation(fields: [userId], references: [id])  
userId Int @unique  
}  
  
model User {  
id Int @id @default(autoincrement())  
email String @unique  
name String?  
posts Post[]  
profile Profile?  
}

然后运行命令

npx prisma migrate dev --name init

此命令执行两项操作：

  • 为此迁移创建新的sql迁移文件
  • 对数据库运行SQL迁移文件 如果此后有新的表需要建，在文件中定义好模型之后只需要执行 ·npx prisma db push

使用prisma操作数据库

该next项目使用的app router模式，我的习惯是在app文件同级下新建一个lib文件夹，在lib文件夹中新建一个db文件夹。在db文件夹中来编写一些对数据库的操作。 例如在db的文件夹下创建一个user.ts文件

import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()
async function main() {  
    await prisma.user.create({  
        data: {  
            name: 'Alice',  
            email: 'alice@prisma.io',  
        },  
    })  
  
const allUsers = await prisma.user.findMany({})   
}

在想使用的页面调用main() 创建一个user，并查询所有的user了。

avatar
文章
阅读
粉丝