The easiest way to work
with a database in Next.js

Query data from MySQL, PostgreSQL & SQL Server databases in Next.js apps with Prisma — a better ORM for JavaScript and TypeScript.

See code examples

What is Prisma?

Prisma makes working with data easy! It offers a type-safe Node.js & TypeScript ORM, global database caching, connection pooling, and real-time database events.

Get started with Prisma

Query

// Creating a new record
await prisma.user.create({
  firstName: “Alice”,
  email: “alice@prisma.io”
})

Table

id  firstName    email  
1   Bobby        bobby@tables.io
2   Nilufar      nilu@email.com
3   Jürgen       jums@dums.edu
4   Alice        alice@prisma.io

How Prisma and Next.js fit together

Next.js blurs the lines between client and server. It supports pre-rendering pages at build time (SSG) or request time (SSR). Prisma is the perfect companion if you need to work with a database in a Next.js app. You can decide whether to access your database with Prisma at build time (getStaticProps), at request time (getServersideProps), using API routes, or by entirely separating the backend out into a standalone server.

If you're in deploying your app to a Serverless or Edge environment, be sure to check out Prisma Accelerate to speed up your database queries. Its scalable connection pool ensures that your database doesn't run out of connections, even during traffic spikes. In addition, it can cache the results of your database queries at the Edge, making for faster response times while reducing the load on your database.

getStaticProps

Static site generation with Prisma

The getStaticProps function in Next.js is executed at build time for static site generation (SSG). It's commonly used for static pages, like blogs and marketing sites. You can use Prisma inside of getStaticProps to send queries to your database:

1// Fetch all posts (in /pages/index.tsx)
2export async function getStaticProps() {
3  const prisma = new PrismaClient()
4  const posts = await prisma.post.findMany()
5
6  return {
7    props : { posts }
8  }
9}

Next.js will pass the props to your React components, enabling static rendering of your page with dynamic data.

1// Display list of posts (in /pages/index.tsx)
2export default ({posts}) =>
3  <ul> 
4   {posts.map(post => (
5     <li key={post.id}>{post.title}</li>
6    ))}
7  </ul>
8);

Explore on GitHub

getServerSideProps

API Routes

Standalone Server

Static site generation with Prisma

1// Fetch all posts (in /pages/index.tsx)
2export async function getStaticProps() {
3  const prisma = new PrismaClient()
4  const posts = await prisma.post.findMany()
5
6  return {
7    props : { posts }
8  }
9}

Next.js will pass the props to your React components, enabling static rendering of your page with dynamic data.

1// Display list of posts (in /pages/index.tsx)
2export default ({posts}) =>
3  <ul> 
4   {posts.map(post => (
5     <li key={post.id}>{post.title}</li>
6    ))}
7  </ul>
8);

Explore on GitHub

“Next.js and Prisma is the ultimate combo if you need a database in React apps! Depending on your needs, you can query your database with Prisma in Next.js API routes, in getServerSideProps or in getStaticProps for full rendering flexibility and top performance 🚀”

Guillermo Rauch -
CEO & Founder of Vercel

Why Prisma and Next.js?

Full rendering flexibility

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

Zero-time database queries

Query your database with Prisma in getStaticProps to generate a static page with dynamic data.

Straightforward deployment

Prisma-powered Next.js projects can be deployed on Vercel, a platform built for Next.js apps.

End-to-end type safety

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

Architecture simplicity

Less architectural complexity for simple applications – scale the architecture as your application grows.

Helpful communities

Both Next.js and Prisma have vibrant communities where you find support, fun events and awesome people.

Build a live chat application with the T3 Stack

Learn how to build a live chat application with the T3 stack: Next.js, tRPC, Tailwind, TypeScript and Prisma. The video also includes best practices for data modeling as well as features like authentication and realtime updates. It's a comprehensive and practical deep dive into a modern web stack!

Watch the tutorial

Speed up your app with Prisma Accelerate

Prisma Accelerate is a connection pooler and global cache that makes your database queries faster, especially in Serverless and Edge environments. Watch the video to learn how exactly it's used and how you can get started with it in a Next.js app!

Watch the demo

Featured Prisma & Next.js community examples

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 Watch intro

Build a full stack app with Next.js, Tailwind, tRPC and Prisma ORM

Thanks to its extensive type-safety guarantees, the stack taught by Francisco Mendes in this tutorial is one of the most robust ones to build web applications today. Learn about fullstack development with end-to-end type-safety by creating a fun grocery list application.

Read tutorial

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.

Visit Blitz.js website Watch intro

CoDox

A starter template for modern web development! CoDox comes with Next.js 13, TypeScript, Tailwind CSS, Shadcn, tRPC, Clerk Auth and a lot more bells and whistels to save you the initial boilerplate for your next Next.js app.

Visit CoDox website Explore on GitHub

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 textares.

Watch tutorial Explore on GitHub

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.

Join our server

GitHub

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

Contribute in GitHub

Twitter

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

Join the conversation

The easiest way to workwith a database in Next.js

What is Prisma?

How Prisma and Next.js fit together

Static site generation with Prisma

Static site generation with Prisma

Why Prisma and Next.js?

Full rendering flexibility

Zero-time database queries

Straightforward deployment

End-to-end type safety

Architecture simplicity

Helpful communities

Build a live chat application with the T3 Stack

Speed up your app with Prisma Accelerate

Featured Prisma & Next.js community examples

Join the Prisma Community

Discord

GitHub

Twitter

The easiest way to work
with a database in Next.js