轻松从 React 应用访问数据库

使用 Prisma 的开发人员友好型数据库工具构建高性能、类型安全的 React 应用：全球最受欢迎的 TypeScript ORM 和第一个无冷启动的无服务器数据库。

试用 React 和 Prisma

为什么选择 React 和 Prisma？

专为高性能 Web 应用程序打造

Prisma Postgres 基于单核系统（unikernels）构建，在裸机服务器上运行，以实现峰值性能和无限可伸缩性。

无服务器，无冷启动

第一个采用即用即付定价、无需基础设施管理且零冷启动的无服务器数据库。

灵活的数据获取与渲染

使用客户端渲染、服务器端渲染和静态站点生成来显示您的数据。

内置全局缓存

为任何数据库查询添加缓存策略，其结果将缓存在离用户最近的地方，以实现峰值性能和用户体验。

端到端类型安全

将 Prisma 与 React 结合使用，可确保您的应用程序从数据库到 React 组件都保持类型一致。

有益的社区

React 和 Prisma 都拥有充满活力的社区，您可以在其中获得支持、有趣的活动和出色的开发人员。

Prisma 和 React 如何协同工作

Prisma 的数据库工具非常适合构建 React 应用程序，充当数据访问层。无论您使用 Next.js、React Router 或 TanStack Start 等元框架，还是构建自己的 API 层，Prisma 都能为您的数据库工作流提供最佳的开发体验。

React 服务器组件

React 服务器组件允许您直接在组件代码中使用 Prisma 访问数据库。这些组件仅在服务器上运行，使您无需暴露凭据或创建 API 端点即可查询数据库。数据在服务器上渲染为 HTML 并流式传输到客户端，对您的 JavaScript 包大小零影响。

// UserList.tsx (Server Component)
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function UserList() {
  // Direct database access in a server component
  const users = await prisma.user.findMany({
    select: {
      id: true,
      name: true,
      email: true,
    },
  })

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  )
}

Next.js App Router

Remix

React Router 7 框架

// UserList.tsx (Server Component)
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function UserList() {
  // Direct database access in a server component
  const users = await prisma.user.findMany({
    select: {
      id: true,
      name: true,
      email: true,
    },
  })

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  )
}

资源

如何在 Next.js 中使用 Prisma ORM

学习如何从头开始使用 Prisma Postgres 构建一个完整的 Next.js 15 应用程序！本教程从使用 create-next-app 引导应用程序开始，并提供逐步说明，逐步使用 Prisma Postgres 作为数据库添加更多功能。

Next.js Vercel

Next.js 15 + Prisma Postgres 认证示例

这个博客应用程序的演示展示了如何使用 Prisma Postgres 和 Next.js 15 构建登录和功能。它默认使用“使用 GitHub 登录”，并且可以轻松扩展到其他身份验证提供商。

Prisma Postgres

精选 Prisma 和 React 社区示例

现代 Saas 启动套件：next-forge

一个用于现代 SaaS 应用的 React 启动模板！next-forge 附带 Next.js 15、身份验证、数据库和 ORM、支付、文档、博客、可观察性、分析、电子邮件等功能，可为您节省下一个 Next.js SaaS 应用的初始样板文件。

探索模板→

Remix Blues Stack

Remix Blues Stack 提供了一个完整、生产就绪的模板，包括在 Fly.io 上基于 Docker 的多区域部署、通过 Prisma ORM 集成 PostgreSQL 数据库，以及使用基于 Cookie 的会话进行身份验证。它包含强大的测试框架、用于 CI/CD 的 GitHub Actions，以及用于简化开发体验的 Tailwind CSS 样式。

在 Github 上探索→