在现代 Web 开发中，构建全栈应用已经成为了一种趋势。Next.js 和 Prisma 是两个非常流行的技术，它们可以帮助我们快速、高效地构建全栈应用。本文将介绍如何使用 Next.js 和 Prisma 构建全栈应用，包括前端、后端和数据库的部分。
什么是 Next.js
Next.js 是一个基于 React 的轻量级框架，它可以帮助我们快速构建静态和动态的 Web 应用程序。Next.js 提供了许多有用的功能，如服务端渲染、静态生成、自动代码分割、热模块替换等等。这些功能使得我们可以更快地构建 Web 应用程序，同时提供更好的用户体验。
什么是 Prisma
Prisma 是一个现代的 ORM（对象关系映射）工具，它可以帮助我们更轻松地访问和操作数据库。Prisma 支持多种数据库，包括 MySQL、PostgreSQL 和 MongoDB 等等。Prisma 还提供了许多有用的功能，如类型安全、自动生成模型等等。这些功能使得我们可以更方便地处理数据库操作，同时提供更好的代码质量。
下面将介绍如何使用 Next.js 和 Prisma 构建全栈应用。我们将使用 Next.js 构建前端应用，Prisma 构建后端应用和数据库部分。
前端部分
首先，我们需要创建一个 Next.js 应用程序。我们可以使用以下命令来创建一个新的 Next.js 应用程序：
npx create-next-app my-app
接下来，我们需要添加一些必要的依赖项，如 prisma 和 @prisma/client：
npm install prisma @prisma/client
然后，我们需要创建一个 .env.local 文件来配置 Prisma：
DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"
这里的 DATABASE_URL 是我们的数据库连接字符串，我们需要将其替换为我们自己的数据库连接字符串。
接下来，我们需要创建一个 Prisma schema 文件来定义我们的数据模型。我们可以在项目的根目录下创建一个 schema.prisma 文件：
// javascriptcn.com 代码示例
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
name String
email String @unique
password String
}
model Post {
id Int @id @default(autoincrement())
title String
content String
published Boolean
author User @relation(fields: [authorId], references: [id])
authorId Int
}这里的数据模型包括两个实体：User 和 Post。User 实体表示用户，包括用户的姓名、电子邮件和密码。Post 实体表示文章，包括文章的标题、内容、发布状态和作者信息。
接下来，我们需要生成 Prisma 客户端代码。我们可以使用以下命令来生成代码：
npx prisma generate
这将会生成一个 @prisma/client 目录，包含了 Prisma 客户端代码。
接下来，我们需要在 Next.js 应用程序中使用 Prisma 客户端代码。我们可以在 pages/index.js 文件中添加以下代码：
// javascriptcn.com 代码示例
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default function Home({ posts }) {
return (
<div>
<h1>Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
<p>Author: {post.author.name}</p>
</li>
))}
</ul>
</div>
)
}
export async function getStaticProps() {
const posts = await prisma.post.findMany({
include: {
author: true,
},
})
return {
props: {
posts,
},
}
}这里的代码使用 getStaticProps 函数来获取所有文章，并将它们传递给 Home 组件。
现在，我们可以使用以下命令来启动 Next.js 应用程序：
npm run dev
这将会启动一个开发服务器，我们可以在浏览器中访问 http://localhost:3000/ 来查看我们的应用程序。
后端部分
接下来，我们需要使用 Prisma 来构建后端部分。我们可以使用以下命令来创建一个新的 Prisma 应用程序：
npx prisma init
这将会创建一个新的 Prisma 应用程序，并在项目的根目录下创建一个 prisma 目录。
然后，我们需要添加一些必要的依赖项，如 express 和 cors：
npm install express cors
接下来，我们可以在 index.js 文件中添加以下代码：
// javascriptcn.com 代码示例
const express = require('express')
const cors = require('cors')
const { PrismaClient } = require('@prisma/client')
const prisma = new PrismaClient()
const app = express()
app.use(cors())
app.get('/posts', async (req, res) => {
const posts = await prisma.post.findMany({
include: {
author: true,
},
})
res.json(posts)
})
app.listen(4000, () => {
console.log('Server running on http://localhost:4000')
})这里的代码创建了一个 Express 应用程序，并提供了一个 /posts 路由来获取所有文章。
现在，我们可以使用以下命令来启动后端应用程序：
node index.js
这将会启动一个服务器，我们可以在浏览器中访问 http://localhost:4000/posts 来查看所有文章。
数据库部分
最后，我们需要在数据库中添加一些数据。我们可以使用以下命令来创建数据库表：
npx prisma migrate dev --name init
这将会创建一个新的数据库迁移，并在数据库中创建 User 和 Post 表。
接下来，我们可以使用以下命令来添加一些数据：
npx prisma db seed --preview-feature
这将会添加一些示例数据到数据库中。
现在，我们已经成功地使用 Next.js 和 Prisma 构建了一个全栈应用程序。我们可以在浏览器中访问 http://localhost:3000/ 来查看我们的应用程序，并在浏览器中访问 http://localhost:4000/posts 来查看所有文章。
总结
本文介绍了如何使用 Next.js 和 Prisma 构建全栈应用，包括前端、后端和数据库部分。我们学习了如何使用 Next.js 构建前端应用，Prisma 构建后端应用和数据库部分，以及如何将它们组合在一起来构建一个全栈应用程序。希望这篇文章对你有所帮助，让你更好地理解如何构建全栈应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653c60337d4982a6eb686bd0