prisma_logo
Products
ORM
Talk to your database easily
Postgres
Managed Postgres for global workloads
Studio
Explore and manipulate your data
Optimize
AI-driven query analysis
Accelerate
Make your database global
Pricing
Resources
Docs
Blog
0K
Log inSign up

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

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

Try Next.js with Prisma

Why Next.js 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 Next.js ensures your app is coherently typed, from the database to your React components.

Helpful communities

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

How Prisma and Next.js fit together

Prisma’s database tools are the perfect fit for building Next.js applications. They serve as the data access layer for Server Components (both static and dynamic), Server Actions, Route Handlers, and standalone services.

Static Data

Static Site Generation with Prisma

Next.js 13+ introduced a fundamental shift in how we handle data fetching. Server Components, which are the default in the App Router, allow you to fetch data directly in your components without extra wrappers or special functions. This means you can use Prisma directly in your components and automatically get static generation when possible.

Here's how to implement a blog page that's statically generated at build time. The data fetching happens server-side, and the HTML is generated once during build.

// app/blog/[slug]/page.tsx


import { PrismaClient } from '@prisma/client'


const prisma = new PrismaClient()


// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await prisma.post.findMany()
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({ params }: { params: { slug: string } }) {
  // Fetch the post based on slug
  const post = await prisma.post.findUnique({
    where: { slug: params.slug },
  })
  
  // Simple demo rendering
  return (
    <div>
      <h1>{post?.title || 'Post not found'}</h1>
      <p>{post?.content || 'No content available'}</p>
    </div>
  )
}
Dynamic Data
Server Actions
API Routes
Client Components

Static Site Generation with Prisma

Next.js 13+ introduced a fundamental shift in how we handle data fetching. Server Components, which are the default in the App Router, allow you to fetch data directly in your components without extra wrappers or special functions. This means you can use Prisma directly in your components and automatically get static generation when possible.

Here's how to implement a blog page that's statically generated at build time. The data fetching happens server-side, and the HTML is generated once during build.

// app/blog/[slug]/page.tsx


import { PrismaClient } from '@prisma/client'


const prisma = new PrismaClient()


// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await prisma.post.findMany()
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({ params }: { params: { slug: string } }) {
  // Fetch the post based on slug
  const post = await prisma.post.findUnique({
    where: { slug: params.slug },
  })
  
  // Simple demo rendering
  return (
    <div>
      <h1>{post?.title || 'Post not found'}</h1>
      <p>{post?.content || 'No content available'}</p>
    </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.jsVercel

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.

Next.jsPrisma Postgres

Next.js and Prisma is the ultimate combo if you need a database in React apps! 🚀

Guillermo Rauch
Guillermo Rauch -
CEO & Founder
of Vercel

Featured Prisma & Next.js community examples

Modern Saas Starter Kit: next-forge

A starter template for modern SaaS apps! 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.

Read tutorial
Prisma in Next.js - My fav Way to Work with Databases

Learn best practices for using Prisma with Next.js App Router! Explore server components, server actions, and edge middleware, plus efficient querying, handling migrations, and deploying to Vercel. Perfect your database workflow and scale seamlessly!

Read tutorial
t3 Stack
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 GithubWatch intro
Blitz.js
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.

Vitis Blitz.js Website
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