Access your Database from React Apps with Ease

Build high-performance and type-safe React apps with Prisma’s developer-friendly database tools: The world’s most popular TypeScript ORM and the first serverless database without cold starts.

Try React with Prisma

Why React and Prisma?

Built for high-performance web apps

Built on unikernels, Prisma Postgres runs on bare metal servers for peak performance and infinite scalability.

Serverless, without cold starts

The first serverless database with pay-as-you-go pricing, no infrastructure management, and zero cold starts.

Flexible data fetching & rendering

Display your data using client-side rendering, server-side rendering and static site generation.

Built-in global caching

Add a cache strategy to any database query and its results will be cached close to your users for peak performance and UX.

End-to-end type safety

Pairing Prisma with React ensures your app is coherently typed, from the database to your React components.

Helpful communities

Both React and Prisma have vibrant communities where you find support, fun events and amazing developers.

How Prisma and React fit together

Prisma’s database tools are the perfect fit for building React apps, serving as the data access layer. Whether you’re using a meta-framework like Next.js, React Router, or TanStack Start, or are building your own API layer, Prisma providers the best DX for your database workflows.

React Server Components

React Server Components let you access your database with Prisma directly in your component code. These components run exclusively on the server, allowing you to query your database without exposing credentials or creating API endpoints. The data is rendered to HTML on the server and streamed to the client, with zero impact on your JavaScript bundle size.

// 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 Framework

// 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>
  )
}

Resources

How to use Prisma ORM with Next.js

Learn how to build a fullstack Next.js 15 app with Prisma Postgres from scratch! This tutorial starts with bootstrapping an app using create-next-app and provides step-by-step instructions for gradually adding adds more functionality using Prisma Postgres as a database.

Next.js Vercel

Next.js 15 + Prisma Postgres Auth Example

This demo for a blogging application demonstrates how to build login and functionality using Prisma Postgres and Next.js 15. It uses "Login with GitHub" by default and can easily be expanded to other authentication providers.

Prisma Postgres

Featured Prisma & React community examples

Modern Saas Starter Kit: next-forge

A starter template for modern SaaS apps with React! next-forge comes with Next.js 15, auth, DB & ORM, payments, docs, blog, o11y, analytics, emails, and a lot more, to save you the initial boilerplate for your next Next.js SaaS app.

Explore template

Remix Blues Stack

The Remix Blues Stack provides a complete, production-ready template with Docker-based multi-region deployment on Fly.io, PostgreSQL database integration via Prisma ORM, and authentication using cookie-based sessions. It includes robust testing frameworks, GitHub Actions for CI/CD, and styling with Tailwind CSS for a streamlined development experience.

Explore on Github

t3 Stack

t3 is a web development stack focused on simplicity, modularity, and full-stack type safety. It includes Next.js, tRPC, Tailwind, TypeScript, Prisma and NextAuth.

Explore on Github

Blitz.js

Blitz.js is an application framework that is built on top of Next.js and Prisma. It brings back the simplicity and conventions of server-rendered frameworks like Ruby on Rails while preserving everything developers love about React and client-side rendering.

Check it out

Fullstack Form Builder

This comprehensive 4-hour tutorial teaches you how to build a fullstack form application. The form will be responsive, allow for drag & drop functionality, features different kinds of layout fields like titles, subtitles and paragraphs as well various kinds of field types like text, number, dropdowns, dates, checkbox and text areas.

Watch tutorial

Join the Prisma Community

We have multiple channels where you can engage with members of our community as well as the Prisma team.

Discord

Chat in real-time, hang out, and share ideas with community members and our team.

Find more

GitHub

Browse the Prisma source code, send feedback, and get answers to your technical questions.

Find more

X

Stay updated, engage with our team, and become an integral part of our vibrant online community.

Find more

Youtube

Stay updated, engage with our team, and become an integral part of our vibrant online community.

Find more