產品

零配置無伺服器 Postgres

輕鬆與資料庫互動

探索和操作您的資料

讓您的資料庫全球化

資源

Prisma 在您的技術棧中

輕鬆從 React 應用訪問您的資料庫

使用 Prisma 開發者友好的資料庫工具構建高效能、型別安全的 React 應用：全球最受歡迎的 TypeScript ORM 以及首個無冷啟動的無伺服器資料庫。

試用 React 與 Prisma

為什麼選擇 React 和 Prisma？

專為高效能 Web 應用打造

基於 unikernels，Prisma Postgres 執行在裸機伺服器上，以實現峰值效能和無限可擴充套件性。

無伺服器，無冷啟動

首個無伺服器資料庫，按需付費，無需基礎設施管理，並且零冷啟動。

靈活的資料獲取與渲染

使用客戶端渲染、伺服器端渲染和靜態網站生成來顯示您的資料。

內建全球快取

為任何資料庫查詢新增快取策略，其結果將在靠近使用者的地方快取，以實現最佳效能和使用者體驗。

端到端型別安全

將 Prisma 與 React 結合使用可確保您的應用程式從資料庫到 React 元件都保持一致的型別。

有益的社群

React 和 Prisma 都擁有活躍的社群，您可以在其中獲得支援、參與有趣的活動並結識優秀的開發者。

Prisma 和 React 如何協同工作

Prisma 的資料庫工具非常適合構建 React 應用，作為資料訪問層。無論您是使用 Next.js、React Router 或 TanStack Start 等元框架，還是構建自己的 API 層，Prisma 都能為您的資料庫工作流提供最佳的開發者體驗 (DX)。

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 框架

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 中使用 Prisma ORM

學習如何從頭開始使用 Prisma Postgres 構建一個全棧 Next.js 15 應用！本教程從使用 create-next-app 引導應用程式開始，並提供了逐步說明，指導您如何逐步使用 Prisma Postgres 作為資料庫新增更多功能。

Next.js 15 + Prisma Postgres 認證示例

這個部落格應用演示瞭如何使用 Prisma Postgres 和 Next.js 15 構建登入功能。它預設使用“GitHub 登入”，並且可以輕鬆擴充套件到其他身份驗證提供商。

Prisma Postgres

精選 Prisma 與 React 社群示例

現代 SaaS 啟動套件：next-forge

適用於 React 現代 SaaS 應用的啟動模板！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 上探索

t3 Stack

t3 是一個專注於簡潔性、模組化和全棧型別安全的 Web 開發技術棧。它包括 Next.js、tRPC、Tailwind、TypeScript、Prisma 和 NextAuth。

在 Github 上探索

Blitz.js

Blitz.js 是一個基於 Next.js 和 Prisma 構建的應用框架。它恢復了 Ruby on Rails 等伺服器渲染框架的簡潔性和約定，同時保留了開發者喜歡 React 和客戶端渲染的一切。

全棧表單構建器

這個全面的 4 小時教程將教您如何構建一個全棧表單應用。該表單將是響應式的，支援拖放功能，並具有不同型別的佈局欄位，如標題、副標題和段落，以及各種欄位型別，如文字、數字、下拉列表、日期、複選框和文字區域。

加入 Prisma 社群

我們有多個渠道，您可以與社群成員以及 Prisma 團隊進行互動。

Discord

與社群成員和我們的團隊即時聊天、交流和分享想法。

GitHub

瀏覽 Prisma 原始碼、傳送反饋，並獲得技術問題的答案。

X

獲取最新資訊，與我們的團隊互動，併成為我們活躍線上社群不可或缺的一部分。

YouTube

獲取最新資訊，與我們的團隊互動，併成為我們活躍線上社群不可或缺的一部分。

© . This site is unofficial and not affiliated with Prisma Data, Inc.