编辑“︁Next.js与Prisma”︁

= Next.js与Prisma =

== 介绍 ==  
'''Next.js''' 是一个基于 React 的现代前端框架，支持服务端渲染（SSR）、静态站点生成（SSG）和 API 路由。而 '''Prisma''' 是一个现代化的数据库工具包，提供类型安全的数据库访问和直观的数据建模。将两者结合，可以高效地构建全栈应用，同时利用 Next.js 的强大功能和 Prisma 的数据库管理能力。

本章节将详细介绍如何在 Next.js 项目中集成 Prisma，涵盖从初始化到实际查询的完整流程，适合初学者和需要深入了解的开发人员。

== 安装与配置 ==  

=== 安装 Prisma ===  
首先，在 Next.js 项目中安装 Prisma 及其客户端库：  
<syntaxhighlight lang="bash">
npm install prisma @prisma/client
</syntaxhighlight>

=== 初始化 Prisma ===  
运行以下命令生成 Prisma 配置文件：  
<syntaxhighlight lang="bash">
npx prisma init
</syntaxhighlight>  
这会在项目中创建 `prisma/schema.prisma` 文件和 `.env` 环境文件。

=== 配置数据库连接 ===  
在 `.env` 文件中配置数据库连接字符串（以 PostgreSQL 为例）：  
<syntaxhighlight lang="ini">
DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"
</syntaxhighlight>  

在 `schema.prisma` 中定义数据模型：  
<syntaxhighlight lang="prisma">
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
}
</syntaxhighlight>  

=== 迁移数据库 ===  
运行以下命令生成并应用迁移：  
<syntaxhighlight lang="bash">
npx prisma migrate dev --name init
</syntaxhighlight>  

== 在 Next.js 中使用 Prisma ==  

=== 创建 Prisma 客户端实例 ===  
为了避免重复创建客户端实例，可以在项目中创建一个共享的 Prisma 客户端：  
<syntaxhighlight lang="typescript">
// lib/prisma.ts
import { PrismaClient } from '@prisma/client'

declare global {
  var prisma: PrismaClient | undefined
}

const prisma = global.prisma || new PrismaClient()

if (process.env.NODE_ENV === 'development') global.prisma = prisma

export default prisma
</syntaxhighlight>  

=== 查询数据 ===  
在 Next.js API 路由中使用 Prisma 查询数据库：  
<syntaxhighlight lang="typescript">
// pages/api/users.ts
import prisma from '../../lib/prisma'
import { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await prisma.user.findMany()
    res.json(users)
  } else if (req.method === 'POST') {
    const { name, email } = req.body
    const user = await prisma.user.create({
      data: { name, email }
    })
    res.json(user)
  }
}
</syntaxhighlight>  

=== 输出示例 ===  
调用 `GET /api/users` 返回的数据：  
<syntaxhighlight lang="json">
[
  { "id": 1, "name": "Alice", "email": "alice@example.com" },
  { "id": 2, "name": "Bob", "email": "bob@example.com" }
]
</syntaxhighlight>  

== 实际案例 ==  

=== 用户注册系统 ===  
以下是一个完整的用户注册流程，结合 Next.js API 路由和 Prisma：  

1. **前端表单提交**（使用 React 组件）：  
<syntaxhighlight lang="typescript">
// components/SignUpForm.tsx
import { useState } from 'react'

export default function SignUpForm() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault()
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email })
    })
    const data = await response.json()
    console.log('User created:', data)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" />
      <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <button type="submit">Sign Up</button>
    </form>
  )
}
</syntaxhighlight>  

2. **后端处理**（Prisma 创建用户）：  
已在前面 `pages/api/users.ts` 中实现。

== 高级主题 ==  

=== 事务处理 ===  
Prisma 支持事务操作，例如同时创建用户和关联数据：  
<syntaxhighlight lang="typescript">
await prisma.$transaction([
  prisma.user.create({ data: { name: 'Charlie', email: 'charlie@example.com' } }),
  prisma.profile.create({ data: { bio: 'Developer', userId: newUser.id } })
])
</syntaxhighlight>  

=== 数据关系 ===  
在 `schema.prisma` 中定义关系模型：  
<syntaxhighlight lang="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
}
</syntaxhighlight>  

== 性能优化 ==  

=== 连接池管理 ===  
在生产环境中，配置 Prisma 连接池以避免资源耗尽：  
<syntaxhighlight lang="prisma">
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  pool {
    max_connections = 20
  }
}
</syntaxhighlight>  

=== 查询优化 ===  
使用 Prisma 的 `select` 和 `include` 减少不必要的数据传输：  
<syntaxhighlight lang="typescript">
const usersWithProfiles = await prisma.user.findMany({
  include: { profile: true }
})
</syntaxhighlight>  

== 总结 ==  
Next.js 与 Prisma 的结合为全栈开发提供了高效、类型安全的解决方案。通过本章的学习，您应该能够：  
* 在 Next.js 中配置 Prisma  
* 执行基本的 CRUD 操作  
* 处理数据关系和事务  
* 优化数据库查询性能  

下一步可以探索 Prisma 的高级功能，如中间件、原生数据库操作和迁移管理。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js数据库集成]]