简体中文 繁體中文 English 日本語 Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français

开启辅助访问 切换到宽版

站内搜索

搜索

活动公告

通知：是的！我们正在计划一个大动作！
11-02 12:46
通知：Telegram 推送频道https://t.me/+2tB3a7aKXlw2YjA1 及时接收第一手论坛帖子信息～
10-23 09:32
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，将及时处理！
10-23 09:31
通知：加入QQ社群吧 https://qm.qq.com/q/QZibQd1hiq
10-23 09:28
通知：签到时间调整为每日4:00（东八区）
10-23 09:26
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

Next.js与Prisma强强联手打造类型安全的全栈开发新体验

威震华夏关云长

3万

主题

349

科技点

3万

积分

大区版主

木柜子打湿

积分
31898

三倍冰淇淋无人之境【一阶】财Doro小樱（小丑装）立华奏以外的星空【二阶】⑨的冰沙
发表于 2025-9-10 14:00:00 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
1. 引言

在现代Web开发中，类型安全和开发效率是开发者们追求的重要目标。Next.js作为React的全栈框架，提供了服务端渲染、静态站点生成和API路由等功能，而Prisma作为下一代ORM（对象关系映射），提供了类型安全的数据库访问。当这两个强大的工具结合在一起时，它们为开发者提供了一个无缝的、类型安全的全栈开发体验。

2. Next.js与Prisma简介

2.1 Next.js概述

Next.js是一个基于React的轻量级全栈框架，它提供了以下核心功能：

• 服务端渲染（SSR）
• 静态站点生成（SSG）
• API路由（构建无服务器API）
• 自动代码分割和优化
• 内置CSS和Sass支持
• 文件系统路由

Next.js允许开发者在同一个项目中构建前端界面和后端API，使得全栈开发变得更加简单和高效。

2.2 Prisma概述

Prisma是一个现代的数据库工具包，它主要由三部分组成：

1. Prisma Client：自动生成的、类型安全的查询构建器
2. Prisma Migrate：声明式数据库模式迁移系统
3. Prisma Studio：用于查看和编辑数据库数据的GUI

Prisma支持多种数据库，包括PostgreSQL、MySQL、SQLite、SQL Server、MongoDB（预览）等，通过其类型安全的查询构建器，开发者可以在编译时捕获错误，而不是在运行时。

3. 为什么选择Next.js与Prisma组合

3.1 类型安全的全栈开发

Next.js与Prisma的结合提供了端到端的类型安全。从数据库模式到前端组件，整个数据流都是类型安全的，这意味着：

• 数据库模式变更会自动反映到类型定义中
• API请求和响应的类型可以被验证
• 前端组件接收到的props类型可以被验证

这种类型安全大大减少了运行时错误，提高了代码质量和开发效率。

3.2 开发效率提升

使用Next.js和Prisma的组合，开发者可以：

• 使用相同的语言（TypeScript）进行前端和后端开发
• 自动生成类型定义，减少手动类型编写的工作量
• 快速构建和迭代全栈应用

3.3 卓越的开发者体验

Prisma的自动完成功能和类型检查，以及Next.js的热重载和快速刷新功能，为开发者提供了卓越的开发体验。开发者可以更快地编写代码，更早地发现错误，并更轻松地进行重构。

4. 设置Next.js与Prisma项目

4.1 创建Next.js项目

首先，让我们创建一个新的Next.js项目：
  2. npx create-next-app@latest my-next-prisma-app --typescript
  3. cd my-next-prisma-app
复制代码

4.2 安装和配置Prisma

接下来，安装Prisma：
  2. npm install prisma @prisma/client
  3. npx prisma init
复制代码

这将创建一个prisma目录，其中包含一个schema.prisma文件。让我们配置这个文件以使用SQLite数据库（为了简单起见，你也可以选择PostgreSQL或MySQL）：
  2. // prisma/schema.prisma
  4. generator client {
  5.   provider = "prisma-client-js"
  6. }
  8. datasource db {
  9.   provider = "sqlite"
  10.   url      = env("DATABASE_URL")
  11. }
  13. model User {
  14.   id        Int      @id @default(autoincrement())
  15.   email     String   @unique
  16.   name      String?
  17.   posts     Post[]
  18.   createdAt DateTime @default(now())
  19.   updatedAt DateTime @updatedAt
  20. }
  22. model Post {
  23.   id        Int      @id @default(autoincrement())
  24.   title     String
  25.   content   String?
  26.   published Boolean  @default(false)
  27.   author    User     @relation(fields: [authorId], references: [id])
  28.   authorId  Int
  29.   createdAt DateTime @default(now())
  30.   updatedAt DateTime @updatedAt
  31. }
复制代码

4.3 设置环境变量

在项目根目录创建一个.env文件，并添加数据库URL：
  2. # .env
  3. DATABASE_URL="file:./dev.db"
复制代码

4.4 运行迁移

现在，让我们运行迁移来创建数据库：
  2. npx prisma migrate dev --name init
复制代码

这将创建数据库并应用我们定义的模式。

4.5 生成Prisma客户端

每次修改schema后，都需要重新生成Prisma客户端：
  2. npx prisma generate
复制代码

5. 在Next.js中使用Prisma

5.1 创建Prisma客户端实例

为了在Next.js应用中使用Prisma，我们需要创建一个Prisma客户端实例。为了避免在开发模式下创建多个实例，我们可以使用单例模式：
  2. // lib/prisma.ts
  4. import { PrismaClient } from '@prisma/client'
  6. const prismaClientSingleton = () => {
  7.   return new PrismaClient()
  8. }
  10. declare global {
  11.   var prisma: undefined | ReturnType<typeof prismaClientSingleton>
  12. }
  14. const prisma = globalThis.prisma ?? prismaClientSingleton()
  16. export default prisma
  18. if (process.env.NODE_ENV !== 'production') globalThis.prisma = prisma
复制代码

5.2 在API路由中使用Prisma

Next.js的API路由允许我们创建后端端点。让我们创建一个获取所有用户的API：
  2. // pages/api/users.ts
  4. import type { NextApiRequest, NextApiResponse } from 'next'
  5. import prisma from '../../lib/prisma'
  7. export default async function handler(
  8.   req: NextApiRequest,
  9.   res: NextApiResponse
  10. ) {
  11.   if (req.method === 'GET') {
  12.     try {
  13.       const users = await prisma.user.findMany({
  14.         include: {
  15.           posts: true,
  16.         },
  17.       })
  18.       res.status(200).json(users)
  19.     } catch (error) {
  20.       res.status(500).json({ error: 'Error fetching users' })
  21.     }
  22.   } else {
  23.     res.setHeader('Allow', ['GET'])
  24.     res.status(405).end(`Method ${req.method} Not Allowed`)
  25.   }
  26. }
复制代码

5.3 在getServerSideProps中使用Prisma

Next.js的getServerSideProps函数允许我们在页面渲染前从服务器获取数据。让我们创建一个用户列表页面：
  2. // pages/users.tsx
  4. import { GetServerSideProps } from 'next'
  5. import prisma from '../lib/prisma'
  6. import { User } from '@prisma/client'
  8. interface UsersPageProps {
  9.   users: (User & {
  10.     posts: {
  11.       id: number;
  12.       title: string;
  13.       published: boolean;
  14.     }[];
  15.   })[];
  16. }
  18. export default function UsersPage({ users }: UsersPageProps) {
  19.   return (
  20.     <div>
  21.       <h1>Users</h1>
  22.       <ul>
  23.         {users.map((user) => (
  24.           <li key={user.id}>
  25.             <h2>{user.name || user.email}</h2>
  26.             <p>Email: {user.email}</p>
  27.             <h3>Posts:</h3>
  28.             <ul>
  29.               {user.posts.map((post) => (
  30.                 <li key={post.id}>
  31.                   {post.title} ({post.published ? 'Published' : 'Draft'})
  32.                 </li>
  33.               ))}
  34.             </ul>
  35.           </li>
  36.         ))}
  37.       </ul>
  38.     </div>
  39.   )
  40. }
  42. export const getServerSideProps: GetServerSideProps<UsersPageProps> = async () => {
  43.   const users = await prisma.user.findMany({
  44.     include: {
  45.       posts: {
  46.         select: {
  47.           id: true,
  48.           title: true,
  49.           published: true,
  50.         },
  51.       },
  52.     },
  53.   })
  55.   return {
  56.     props: {
  57.       users: JSON.parse(JSON.stringify(users)),
  58.     },
  59.   }
  60. }
复制代码

注意：我们使用JSON.parse(JSON.stringify(users))来序列化数据，因为Prisma返回的对象包含Date对象，这些对象不能直接通过props传递。

5.4 在React组件中使用SWR获取数据

对于客户端数据获取，我们可以使用SWR（Stale-While-Revalidate）库。首先安装SWR：
  2. npm install swr
复制代码

然后创建一个获取函数：
  2. // lib/fetcher.ts
  4. const fetcher = async (url: string) => {
  5.   const res = await fetch(url)
  7.   if (!res.ok) {
  8.     const error = new Error('An error occurred while fetching the data.')
  9.     error.message = await res.json()
  10.     throw error
  11.   }
  13.   return res.json()
  14. }
  16. export default fetcher
复制代码

现在，我们可以在组件中使用SWR：
  2. // pages/posts.tsx
  4. import useSWR from 'swr'
  5. import fetcher from '../lib/fetcher'
  7. interface Post {
  8.   id: number;
  9.   title: string;
  10.   content?: string;
  11.   published: boolean;
  12.   authorId: number;
  13. }
  15. export default function PostsPage() {
  16.   const { data: posts, error } = useSWR<Post[]>('/api/posts', fetcher)
  18.   if (error) return <div>Failed to load</div>
  19.   if (!posts) return <div>Loading...</div>
  21.   return (
  22.     <div>
  23.       <h1>Posts</h1>
  24.       <ul>
  25.         {posts.map((post) => (
  26.           <li key={post.id}>
  27.             <h2>{post.title}</h2>
  28.             <p>{post.content}</p>
  29.             <p>Status: {post.published ? 'Published' : 'Draft'}</p>
  30.           </li>
  31.         ))}
  32.       </ul>
  33.     </div>
  34.   )
  35. }
复制代码

6. 类型安全的实现方式

6.1 Prisma生成类型

Prisma的一个强大功能是它能够根据数据库模式自动生成TypeScript类型。当我们运行npx prisma generate时，Prisma会生成一个@prisma/client模块，其中包含所有模型和它们的类型。

例如，对于我们的User和Post模型，Prisma会生成如下类型：
  2. export interface User {
  3.   id: number
  4.   email: string
  5.   name?: string | null
  6.   createdAt: Date
  7.   updatedAt: Date
  8. }
  10. export interface Post {
  11.   id: number
  12.   title: string
  13.   content?: string | null
  14.   published: boolean
  15.   authorId: number
  16.   createdAt: Date
  17.   updatedAt: Date
  18. }
复制代码

6.2 在API路由中使用类型

在API路由中，我们可以使用这些类型来确保请求和响应的类型安全：
  2. // pages/api/posts.ts
  4. import type { NextApiRequest, NextApiResponse } from 'next'
  5. import prisma from '../../lib/prisma'
  6. import { Post } from '@prisma/client'
  8. type ResponseData = {
  9.   message?: string
  10.   post?: Post
  11.   posts?: Post[]
  12.   error?: string
  13. }
  15. export default async function handler(
  16.   req: NextApiRequest,
  17.   res: NextApiResponse<ResponseData>
  18. ) {
  19.   if (req.method === 'GET') {
  20.     try {
  21.       const posts = await prisma.post.findMany()
  22.       res.status(200).json({ posts })
  23.     } catch (error) {
  24.       res.status(500).json({ error: 'Error fetching posts' })
  25.     }
  26.   } else if (req.method === 'POST') {
  27.     try {
  28.       const { title, content, authorId } = req.body
  30.       if (!title || !authorId) {
  31.         return res.status(400).json({ error: 'Title and authorId are required' })
  32.       }
  34.       const post = await prisma.post.create({
  35.         data: {
  36.           title,
  37.           content,
  38.           authorId,
  39.         },
  40.       })
  42.       res.status(201).json({ post })
  43.     } catch (error) {
  44.       res.status(500).json({ error: 'Error creating post' })
  45.     }
  46.   } else {
  47.     res.setHeader('Allow', ['GET', 'POST'])
  48.     res.status(405).end(`Method ${req.method} Not Allowed`)
  49.   }
  50. }
复制代码

6.3 使用Zod进行输入验证

为了进一步增强类型安全，我们可以使用Zod库来验证输入数据。首先安装Zod：
  2. npm install zod
复制代码

然后创建验证模式：
  2. // lib/validations.ts
  4. import { z } from 'zod'
  6. export const createPostSchema = z.object({
  7.   title: z.string().min(1, 'Title is required').max(100),
  8.   content: z.string().optional(),
  9.   authorId: z.number().int().positive('Author ID must be a positive integer'),
  10. })
  12. export type CreatePostInput = z.infer<typeof createPostSchema>
复制代码

现在，我们可以在API路由中使用这些验证模式：
  2. // pages/api/posts.ts
  4. import type { NextApiRequest, NextApiResponse } from 'next'
  5. import prisma from '../../lib/prisma'
  6. import { Post } from '@prisma/client'
  7. import { createPostSchema } from '../../lib/validations'
  9. type ResponseData = {
  10.   message?: string
  11.   post?: Post
  12.   posts?: Post[]
  13.   error?: string
  14.   validationErrors?: Record<string, string[]>
  15. }
  17. export default async function handler(
  18.   req: NextApiRequest,
  19.   res: NextApiResponse<ResponseData>
  20. ) {
  21.   if (req.method === 'GET') {
  22.     try {
  23.       const posts = await prisma.post.findMany()
  24.       res.status(200).json({ posts })
  25.     } catch (error) {
  26.       res.status(500).json({ error: 'Error fetching posts' })
  27.     }
  28.   } else if (req.method === 'POST') {
  29.     try {
  30.       // 验证输入
  31.       const result = createPostSchema.safeParse(req.body)
  32.       
  33.       if (!result.success) {
  34.         const formattedErrors = result.error.format()
  35.         return res.status(400).json({
  36.           validationErrors: formattedErrors as Record<string, string[]>
  37.         })
  38.       }
  40.       const { title, content, authorId } = result.data
  42.       const post = await prisma.post.create({
  43.         data: {
  44.           title,
  45.           content,
  46.           authorId,
  47.         },
  48.       })
  50.       res.status(201).json({ post })
  51.     } catch (error) {
  52.       res.status(500).json({ error: 'Error creating post' })
  53.     }
  54.   } else {
  55.     res.setHeader('Allow', ['GET', 'POST'])
  56.     res.status(405).end(`Method ${req.method} Not Allowed`)
  57.   }
  58. }
复制代码

7. 实际应用示例

让我们创建一个完整的博客应用，展示Next.js和Prisma的强大功能。

7.1 创建博客文章列表页面
  2. // pages/index.tsx
  4. import { GetServerSideProps } from 'next'
  5. import prisma from '../lib/prisma'
  6. import Link from 'next/link'
  8. interface Post {
  9.   id: number
  10.   title: string
  11.   content?: string
  12.   published: boolean
  13.   author: {
  14.     name?: string
  15.     email: string
  16.   }
  17.   createdAt: Date
  18. }
  20. interface HomePageProps {
  21.   posts: Post[]
  22. }
  24. export default function HomePage({ posts }: HomePageProps) {
  25.   return (
  26.     <div className="container mx-auto px-4">
  27.       <h1 className="text-3xl font-bold my-6">Latest Blog Posts</h1>
  28.       
  29.       {posts.length === 0 ? (
  30.         <p>No posts yet. Be the first to write!</p>
  31.       ) : (
  32.         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  33.           {posts.map((post) => (
  34.             <div key={post.id} className="bg-white rounded-lg shadow-md p-6">
  35.               <h2 className="text-xl font-semibold mb-2">
  36.                 <Link href={`/posts/${post.id}`} className="hover:text-blue-600">
  37.                   {post.title}
  38.                 </Link>
  39.               </h2>
  40.               <p className="text-gray-600 mb-4">
  41.                 {post.content ? post.content.substring(0, 100) + '...' : 'No content'}
  42.               </p>
  43.               <div className="flex justify-between items-center">
  44.                 <span className="text-sm text-gray-500">
  45.                   By {post.author.name || post.author.email}
  46.                 </span>
  47.                 <span className="text-sm text-gray-500">
  48.                   {new Date(post.createdAt).toLocaleDateString()}
  49.                 </span>
  50.               </div>
  51.             </div>
  52.           ))}
  53.         </div>
  54.       )}
  55.       
  56.       <div className="mt-8">
  57.         <Link href="/posts/new" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
  58.           Create New Post
  59.         </Link>
  60.       </div>
  61.     </div>
  62.   )
  63. }
  65. export const getServerSideProps: GetServerSideProps<HomePageProps> = async () => {
  66.   const posts = await prisma.post.findMany({
  67.     where: { published: true },
  68.     orderBy: { createdAt: 'desc' },
  69.     include: {
  70.       author: {
  71.         select: {
  72.           name: true,
  73.           email: true,
  74.         },
  75.       },
  76.     },
  77.   })
  79.   return {
  80.     props: {
  81.       posts: JSON.parse(JSON.stringify(posts)),
  82.     },
  83.   }
  84. }
复制代码

7.2 创建博客文章详情页面
  2. // pages/posts/[id].tsx
  4. import { GetServerSideProps } from 'next'
  5. import prisma from '../../lib/prisma'
  6. import Link from 'next/link'
  8. interface Post {
  9.   id: number
  10.   title: string
  11.   content?: string
  12.   published: boolean
  13.   author: {
  14.     name?: string
  15.     email: string
  16.   }
  17.   createdAt: Date
  18.   updatedAt: Date
  19. }
  21. interface PostPageProps {
  22.   post: Post
  23. }
  25. export default function PostPage({ post }: PostPageProps) {
  26.   return (
  27.     <div className="container mx-auto px-4">
  28.       <div className="mb-6">
  29.         <Link href="/" className="text-blue-600 hover:underline">
  30.           &larr; Back to Home
  31.         </Link>
  32.       </div>
  33.       
  34.       <article className="bg-white rounded-lg shadow-md p-6">
  35.         <h1 className="text-3xl font-bold mb-4">{post.title}</h1>
  36.         
  37.         <div className="flex justify-between items-center mb-6 text-gray-600">
  38.           <span>
  39.             By {post.author.name || post.author.email}
  40.           </span>
  41.           <span>
  42.             {new Date(post.createdAt).toLocaleDateString()}
  43.           </span>
  44.         </div>
  45.         
  46.         <div className="prose max-w-none">
  47.           {post.content ? (
  48.             <p className="whitespace-pre-line">{post.content}</p>
  49.           ) : (
  50.             <p className="text-gray-500">No content available.</p>
  51.           )}
  52.         </div>
  53.         
  54.         <div className="mt-8 pt-6 border-t border-gray-200 text-sm text-gray-500">
  55.           <p>
  56.             Created: {new Date(post.createdAt).toLocaleString()}
  57.           </p>
  58.           {post.updatedAt.getTime() !== post.createdAt.getTime() && (
  59.             <p>
  60.               Updated: {new Date(post.updatedAt).toLocaleString()}
  61.             </p>
  62.           )}
  63.         </div>
  64.       </article>
  65.       
  66.       <div className="mt-6">
  67.         <Link href={`/posts/${post.id}/edit`} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 mr-2">
  68.           Edit Post
  69.         </Link>
  70.       </div>
  71.     </div>
  72.   )
  73. }
  75. export const getServerSideProps: GetServerSideProps<PostPageProps, { id: string }> = async (context) => {
  76.   const { id } = context.params!
  78.   const post = await prisma.post.findUnique({
  79.     where: { id: parseInt(id) },
  80.     include: {
  81.       author: {
  82.         select: {
  83.           name: true,
  84.           email: true,
  85.         },
  86.       },
  87.     },
  88.   })
  90.   if (!post) {
  91.     return {
  92.       notFound: true,
  93.     }
  94.   }
  96.   return {
  97.     props: {
  98.       post: JSON.parse(JSON.stringify(post)),
  99.     },
  100.   }
  101. }
复制代码

7.3 创建博客文章编辑页面
  2. // pages/posts/[id]/edit.tsx
  4. import { GetServerSideProps } from 'next'
  5. import { useState } from 'react'
  6. import { useRouter } from 'next/router'
  7. import prisma from '../../../lib/prisma'
  8. import { Post } from '@prisma/client'
  10. interface EditPostPageProps {
  11.   post: Post
  12. }
  14. export default function EditPostPage({ post }: EditPostPageProps) {
  15.   const router = useRouter()
  16.   const [title, setTitle] = useState(post.title)
  17.   const [content, setContent] = useState(post.content || '')
  18.   const [published, setPublished] = useState(post.published)
  19.   const [isSaving, setIsSaving] = useState(false)
  20.   const [error, setError] = useState('')
  22.   const handleSubmit = async (e: React.FormEvent) => {
  23.     e.preventDefault()
  24.     setIsSaving(true)
  25.     setError('')
  27.     try {
  28.       const response = await fetch(`/api/posts/${post.id}`, {
  29.         method: 'PUT',
  30.         headers: {
  31.           'Content-Type': 'application/json',
  32.         },
  33.         body: JSON.stringify({
  34.           title,
  35.           content,
  36.           published,
  37.         }),
  38.       })
  40.       if (!response.ok) {
  41.         throw new Error('Failed to update post')
  42.       }
  44.       await router.push(`/posts/${post.id}`)
  45.     } catch (err) {
  46.       setError('An error occurred while updating the post. Please try again.')
  47.       console.error(err)
  48.     } finally {
  49.       setIsSaving(false)
  50.     }
  51.   }
  53.   return (
  54.     <div className="container mx-auto px-4">
  55.       <div className="mb-6">
  56.         <Link href={`/posts/${post.id}`} className="text-blue-600 hover:underline">
  57.           &larr; Back to Post
  58.         </Link>
  59.       </div>
  60.       
  61.       <h1 className="text-3xl font-bold mb-6">Edit Post</h1>
  62.       
  63.       {error && (
  64.         <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
  65.           {error}
  66.         </div>
  67.       )}
  68.       
  69.       <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow-md p-6">
  70.         <div className="mb-4">
  71.           <label htmlFor="title" className="block text-gray-700 font-bold mb-2">
  72.             Title
  73.           </label>
  74.           <input
  75.             type="text"
  76.             id="title"
  77.             value={title}
  78.             onChange={(e) => setTitle(e.target.value)}
  79.             className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
  80.             required
  81.           />
  82.         </div>
  83.         
  84.         <div className="mb-4">
  85.           <label htmlFor="content" className="block text-gray-700 font-bold mb-2">
  86.             Content
  87.           </label>
  88.           <textarea
  89.             id="content"
  90.             value={content}
  91.             onChange={(e) => setContent(e.target.value)}
  92.             rows={10}
  93.             className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
  94.           />
  95.         </div>
  96.         
  97.         <div className="mb-6">
  98.           <label className="flex items-center">
  99.             <input
  100.               type="checkbox"
  101.               checked={published}
  102.               onChange={(e) => setPublished(e.target.checked)}
  103.               className="form-checkbox h-5 w-5 text-blue-600"
  104.             />
  105.             <span className="ml-2 text-gray-700">Published</span>
  106.           </label>
  107.         </div>
  108.         
  109.         <div className="flex items-center justify-between">
  110.           <button
  111.             type="submit"
  112.             disabled={isSaving}
  113.             className={`bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${
  114.               isSaving ? 'opacity-50 cursor-not-allowed' : ''
  115.             }`}
  116.           >
  117.             {isSaving ? 'Saving...' : 'Save Changes'}
  118.           </button>
  119.          
  120.           <button
  121.             type="button"
  122.             onClick={() => router.push(`/posts/${post.id}`)}
  123.             className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
  124.           >
  125.             Cancel
  126.           </button>
  127.         </div>
  128.       </form>
  129.     </div>
  130.   )
  131. }
  133. export const getServerSideProps: GetServerSideProps<EditPostPageProps, { id: string }> = async (context) => {
  134.   const { id } = context.params!
  136.   const post = await prisma.post.findUnique({
  137.     where: { id: parseInt(id) },
  138.   })
  140.   if (!post) {
  141.     return {
  142.       notFound: true,
  143.     }
  144.   }
  146.   return {
  147.     props: {
  148.       post: JSON.parse(JSON.stringify(post)),
  149.     },
  150.   }
  151. }
复制代码

7.4 创建API路由处理博客文章的CRUD操作
  2. // pages/api/posts/[id].ts
  4. import type { NextApiRequest, NextApiResponse } from 'next'
  5. import prisma from '../../../../lib/prisma'
  6. import { Post } from '@prisma/client'
  7. import { updatePostSchema } from '../../../../lib/validations'
  9. type ResponseData = {
  10.   message?: string
  11.   post?: Post
  12.   error?: string
  13.   validationErrors?: Record<string, string[]>
  14. }
  16. export default async function handler(
  17.   req: NextApiRequest,
  18.   res: NextApiResponse<ResponseData>
  19. ) {
  20.   const { id } = req.query
  22.   if (req.method === 'GET') {
  23.     try {
  24.       const post = await prisma.post.findUnique({
  25.         where: { id: Number(id) },
  26.         include: {
  27.           author: {
  28.             select: {
  29.               id: true,
  30.               name: true,
  31.               email: true,
  32.             },
  33.           },
  34.         },
  35.       })
  37.       if (!post) {
  38.         return res.status(404).json({ error: 'Post not found' })
  39.       }
  41.       res.status(200).json({ post })
  42.     } catch (error) {
  43.       res.status(500).json({ error: 'Error fetching post' })
  44.     }
  45.   } else if (req.method === 'PUT') {
  46.     try {
  47.       // 验证输入
  48.       const result = updatePostSchema.safeParse(req.body)
  49.       
  50.       if (!result.success) {
  51.         const formattedErrors = result.error.format()
  52.         return res.status(400).json({
  53.           validationErrors: formattedErrors as Record<string, string[]>
  54.         })
  55.       }
  57.       const { title, content, published } = result.data
  59.       const post = await prisma.post.update({
  60.         where: { id: Number(id) },
  61.         data: {
  62.           title,
  63.           content,
  64.           published,
  65.         },
  66.       })
  68.       res.status(200).json({ post })
  69.     } catch (error) {
  70.       res.status(500).json({ error: 'Error updating post' })
  71.     }
  72.   } else if (req.method === 'DELETE') {
  73.     try {
  74.       await prisma.post.delete({
  75.         where: { id: Number(id) },
  76.       })
  78.       res.status(204).end()
  79.     } catch (error) {
  80.       res.status(500).json({ error: 'Error deleting post' })
  81.     }
  82.   } else {
  83.     res.setHeader('Allow', ['GET', 'PUT', 'DELETE'])
  84.     res.status(405).end(`Method ${req.method} Not Allowed`)
  85.   }
  86. }
复制代码

8. 最佳实践和性能优化

8.1 数据库查询优化

使用Prisma时，有一些优化数据库查询的最佳实践：

1. 选择性加载字段：只查询你需要的字段，而不是加载整个对象。
  2. // 不推荐
  3. const users = await prisma.user.findMany()
  5. // 推荐
  6. const users = await prisma.user.findMany({
  7.   select: {
  8.     id: true,
  9.     name: true,
  10.     email: true,
  11.   },
  12. })
复制代码

1. 使用分页：对于可能返回大量结果的查询，使用分页。
  2. const page = 1
  3. const pageSize = 10
  5. const posts = await prisma.post.findMany({
  6.   skip: (page - 1) * pageSize,
  7.   take: pageSize,
  8.   orderBy: { createdAt: 'desc' },
  9. })
复制代码

1. 批量操作：使用批量操作减少数据库往返。
  2. // 不推荐
  3. for (const post of posts) {
  4.   await prisma.post.update({
  5.     where: { id: post.id },
  6.     data: { published: true },
  7.   })
  8. }
  10. // 推荐
  11. await prisma.post.updateMany({
  12.   where: { id: { in: posts.map(p => p.id) } },
  13.   data: { published: true },
  14. })
复制代码

8.2 缓存策略

在Next.js中实现缓存可以提高性能：

1. 使用SWR进行客户端缓存：
  2. import useSWR from 'swr'
  3. import fetcher from '../lib/fetcher'
  5. function Posts() {
  6.   const { data: posts, error } = useSWR('/api/posts', fetcher, {
  7.     refreshInterval: 3000, // 每3秒刷新一次
  8.     revalidateOnFocus: true, // 窗口聚焦时重新验证
  9.   })
  11.   if (error) return <div>Failed to load</div>
  12.   if (!posts) return <div>Loading...</div>
  14.   return (
  15.     <ul>
  16.       {posts.map((post) => (
  17.         <li key={post.id}>{post.title}</li>
  18.       ))}
  19.     </ul>
  20.   )
  21. }
复制代码

1. 使用getStaticProps进行静态生成：
  2. export async function getStaticProps() {
  3.   const posts = await prisma.post.findMany({
  4.     where: { published: true },
  5.     orderBy: { createdAt: 'desc' },
  6.   })
  8.   return {
  9.     props: {
  10.       posts: JSON.parse(JSON.stringify(posts)),
  11.     },
  12.     revalidate: 60, // 每60秒重新生成页面
  13.   }
  14. }
复制代码

8.3 Prisma中间件

Prisma中间件允许你在查询执行前后运行自定义逻辑，这对于日志记录、性能监控等非常有用：
  2. // prisma/middleware.ts
  4. import { Prisma } from '@prisma/client'
  6. export const prismaMiddleware: Prisma.Middleware = async (params, next) => {
  7.   const start = Date.now()
  8.   
  9.   const result = await next(params)
  10.   
  11.   const end = Date.now()
  12.   const duration = end - start
  13.   
  14.   console.log(`Query ${params.model}.${params.action} took ${duration}ms`)
  15.   
  16.   return result
  17. }
复制代码

然后在Prisma客户端实例上应用中间件：
  2. // lib/prisma.ts
  4. import { PrismaClient } from '@prisma/client'
  5. import { prismaMiddleware } from '../prisma/middleware'
  7. const prismaClientSingleton = () => {
  8.   const client = new PrismaClient()
  9.   client.$use(prismaMiddleware)
  10.   return client
  11. }
  13. // ... 其余代码不变
复制代码

9. 常见问题和解决方案

9.1 解决序列化问题

Prisma返回的对象包含Date对象，这些对象不能直接通过props传递。以下是几种解决方案：

1. 使用JSON.parse(JSON.stringify())：
  2. export const getServerSideProps: GetServerSideProps = async () => {
  3.   const posts = await prisma.post.findMany()
  4.   
  5.   return {
  6.     props: {
  7.       posts: JSON.parse(JSON.stringify(posts)),
  8.     },
  9.   }
  10. }
复制代码

1. 创建自定义序列化函数：
  2. // lib/serialize.ts
  4. export function serialize<T>(obj: T): T {
  5.   return JSON.parse(JSON.stringify(obj))
  6. }
复制代码

然后在代码中使用：
  2. import { serialize } from '../lib/serialize'
  4. export const getServerSideProps: GetServerSideProps = async () => {
  5.   const posts = await prisma.post.findMany()
  6.   
  7.   return {
  8.     props: {
  9.       posts: serialize(posts),
  10.     },
  11.   }
  12. }
复制代码

1. 使用superjson：
  2. npm install superjson
复制代码

然后创建一个自定义的appWithTranslation：
  2. // lib/withSuperjson.ts
  4. import superjson from 'superjson'
  5. import { AppProps } from 'next/app'
  7. export function withSuperjson({ Component, pageProps }: AppProps) {
  8.   return <Component {...pageProps} />
  9. }
  11. export function serializeData(data: any) {
  12.   return superjson.serialize(data).json
  13. }
  15. export function deserializeData(data: any) {
  16.   return superjson.deserialize(data)
  17. }
复制代码

9.2 环境变量管理

在Next.js项目中管理环境变量时，需要注意以下几点：

1. 创建.env.local文件用于本地开发：
  2. # .env.local
  3. DATABASE_URL="file:./dev.db"
复制代码

1. 在生产环境中设置环境变量：

在部署平台（如Vercel、Netlify等）上设置环境变量，不要将.env文件提交到版本控制系统。

1. 在Next.js中访问环境变量：
  2. // 在服务器端访问
  3. console.log(process.env.DATABASE_URL)
  5. // 在客户端访问（需要以NEXT_PUBLIC_为前缀）
  6. console.log(process.env.NEXT_PUBLIC_API_URL)
复制代码

9.3 数据库连接管理

在开发模式下，Next.js的热重载可能会导致创建多个数据库连接。以下是解决方案：

1. 使用单例模式（如前面所示）：
  2. // lib/prisma.ts
  4. import { PrismaClient } from '@prisma/client'
  6. const prismaClientSingleton = () => {
  7.   return new PrismaClient()
  8. }
  10. declare global {
  11.   var prisma: undefined | ReturnType<typeof prismaClientSingleton>
  12. }
  14. const prisma = globalThis.prisma ?? prismaClientSingleton()
  16. export default prisma
  18. if (process.env.NODE_ENV !== 'production') globalThis.prisma = prisma
复制代码

1. 在Vercel上使用Serverless函数：

在Vercel上，每个请求都会创建一个新的函数实例，因此不需要担心连接池问题。但是，你应该确保在函数结束时关闭Prisma连接：
  2. // pages/api/users.ts
  4. import type { NextApiRequest, NextApiResponse } from 'next'
  5. import prisma from '../../lib/prisma'
  7. export default async function handler(
  8.   req: NextApiRequest,
  9.   res: NextApiResponse
  10. ) {
  11.   try {
  12.     const users = await prisma.user.findMany()
  13.     res.status(200).json(users)
  14.   } catch (error) {
  15.     res.status(500).json({ error: 'Error fetching users' })
  16.   } finally {
  17.     await prisma.$disconnect()
  18.   }
  19. }
复制代码

10. 结论

Next.js与Prisma的结合为现代Web应用开发提供了强大的工具组合。通过类型安全的数据库访问、自动生成的类型定义和灵活的渲染策略，开发者可以构建高效、可维护的全栈应用。

在本文中，我们详细介绍了如何设置Next.js与Prisma项目，如何实现类型安全，以及如何构建一个完整的博客应用。我们还探讨了最佳实践、性能优化和常见问题的解决方案。

通过采用Next.js和Prisma，开发者可以享受以下优势：

• 端到端的类型安全
• 高效的开发体验
• 灵活的数据获取策略
• 强大的数据库查询能力
• 优化的性能

随着这两个工具的不断发展，我们可以期待更多的功能和改进，使全栈开发变得更加简单和高效。

希望本文能够帮助你开始使用Next.js和Prisma构建类型安全的全栈应用。Happy coding!
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

友情链接

keba
磕巴白菜
别管 别听 就是玩
二次元论坛
二次元论坛
按下F逃离世界！
次元宅社
次元宅社
开放、共创，CHANGE SEKAI！
频道订阅

频道订阅

加入社群

加入社群

联系我们|TG频道|RSS

Powered by Pixtech

© 2025 Pixtech Team.