使用Prisma与Next.js构建全栈应用实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00285/article/details/148487090

使用Prisma与Next.js构建全栈应用实战指南

prisma-examples 🚀 Ready-to-run Prisma example projects 项目地址: https://gitcode.com/gh_mirrors/pr/prisma-examples

项目概述

本文将详细介绍如何基于Prisma ORM和Next.js框架构建一个完整的全栈应用示例。这个示例项目展示了现代Web开发中前后端协同工作的最佳实践，特别适合希望学习全栈开发的开发者。

环境准备与项目初始化

1. 项目创建与依赖安装

首先需要创建一个Next.js项目基础结构。Next.js提供了便捷的脚手架工具，可以快速生成项目模板。创建完成后，项目会自动包含React、TypeScript等必要依赖。

2. 数据库配置

本项目默认使用SQLite作为数据库，这是因为它无需额外服务即可运行，非常适合开发和演示。Prisma的schema文件中已经预定义了User和Post两个数据模型：

model User {
  id    Int     @id @default(autoincrement())
  name  String?
  email String  @unique
  posts Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  author    User?    @relation(fields: [authorId], references: [id])
  authorId  Int?
}

数据库迁移与数据填充

1. 执行数据库迁移

使用Prisma Migrate可以轻松管理数据库结构变更：

npx prisma migrate dev --name init

这个命令会：

根据schema.prisma生成SQL迁移文件
在数据库中创建对应的表结构
执行预设的数据填充(seeding)

2. 数据填充机制

项目包含一个seed.ts文件，用于初始化测试数据。Prisma提供了便捷的API来批量创建关联数据：

const users = await prisma.user.createMany({
  data: [
    { name: 'Alice', email: 'alice@prisma.io' },
    { name: 'Bob', email: 'bob@prisma.io' },
  ],
})

应用开发实践

1. 服务端数据获取

Next.js支持多种数据获取方式。在pages/posts/index.tsx中，我们展示了服务端渲染(SSR)的实现：

export async function getServerSideProps() {
  const posts = await prisma.post.findMany({
    include: { author: true },
  })
  return { props: { posts } }
}

2. 数据库切换指南

虽然项目默认使用SQLite，但Prisma支持多种数据库。只需修改schema.prisma中的datasource配置即可切换：

// 切换为PostgreSQL示例
datasource db {
  provider = "postgresql"
  url      = "postgresql://user:password@localhost:5432/mydb"
}

应用演进与功能扩展

1. 添加新功能模块

假设我们需要增加用户资料功能，典型开发流程如下：

在Prisma schema中添加Profile模型
创建数据库迁移
更新前端页面和API

2. 模型关系定义

Prisma支持多种关系类型。例如用户与资料的一对一关系：

model User {
  id      Int      @id @default(autoincrement())
  profile Profile?
}

model Profile {
  id     Int     @id @default(autoincrement())
  bio    String?
  user   User    @relation(fields: [userId], references: [id])
  userId Int     @unique
}