Skip to main content

全栈

全栈框架，例如 Next.js、Remix 或 SvelteKit，模糊了服务器和客户端之间的界限。这些框架还提供了用于在服务器上获取和更改数据的不同模式。

¥Fullstack frameworks, such as Next.js, Remix or SvelteKit, blur the lines between the server and the client. These frameworks also provide different patterns for fetching and mutating data on the server.

你可以使用 Prisma 客户端、使用你选择的框架、从应用的服务器端部分查询数据库。

¥You can query your database using Prisma Client, using your framework of choice, from the server-side part of your application.

支持的框架​

¥Supported frameworks

以下是可与 Prisma ORM 一起使用的框架和库的非详尽列表：

¥Here's a non-exhaustive list of frameworks and libraries you can use with Prisma ORM:

全栈应用示例（例如 Next.js）​

¥Fullstack app example (e.g. Next.js)

提示

如果你想了解如何使用 Next.js 和 Prisma ORM 构建应用，请查看这个全面的 视频教程。

¥If you want to learn how to build an app with Next.js and Prisma ORM, check out this comprehensive video tutorial.

假设你有一个与此类似的 Prisma 架构：

¥Assume you have a Prisma schema that looks similar to this:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

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

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

现在，你可以使用 getServerSideProps、getStaticProps、API 路由中的 Prisma 客户端 API 或使用 远程过程调用 和 GraphQL 等 API 库来实现查询数据库的逻辑。

¥You can now implement the logic for querying your database using Prisma Client API inside getServerSideProps, getStaticProps, API routes, or using API libraries such as tRPC and GraphQL.

getServerSideProps​

// (in /pages/index.tsx)

// Alternatively, you can use `getStaticProps`
// in place of `getServerSideProps`.
export const getServerSideProps = async () => {
  const feed = await prisma.post.findMany({
    where: {
      published: true,
    },
  })
  return { props: { feed } }
}

Next.js 会将 props 传递给你的 React 组件，你可以在其中显示数据库中的数据。

¥Next.js will pass the props to your React component where you can display the data from your database.

API 路由​

¥API Routes

// Fetch all posts (in /pages/api/posts.ts)
const prisma = new PrismaClient()

export default async function handle(req, res) {
  const posts = await prisma.post.findMany({
    where: {
      published: true,
    },
  })
  res.json(posts)
}

请注意，你可以在 Next.js API 路由中使用 Prisma ORM 通过 REST、GraphQL 和 tRPC 将查询发送到数据库。

¥Note that you can use Prisma ORM inside of Next.js API routes to send queries to your database – with REST, GraphQL, and tRPC.

然后，你可以获取数据并将其显示在前端中。

¥You can then fetch data and display it in your frontend.

准备运行的全栈示例项目​

¥Ready-to-run fullstack example projects

你可以在 prisma-examples 存储库中找到几个可立即运行的示例，这些示例展示了如何使用 Prisma Client 来全栈应用。

¥You can find several ready-to-run examples that show how to fullstack apps with Prisma Client in the prisma-examples repository.

示例描述
Next.jsFullstack Next.js 15 应用
Next.js (GraphQL)使用 GraphQL Yoga、Pothos 和 Apollo 客户端的全栈 Next.js 应用
Remix使用操作和加载器的 Fullstack Remix 应用
SvelteKit使用操作和加载器的全栈 Sveltekit 应用
Nuxt使用 API 路由的全栈 Nuxt 应用