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.
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
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 { prisma } from '@/lib/prisma'
export async function generateStaticParams() {
const posts = await prisma.post.findMany()
return posts.map((post) => ({ slug: post.slug }))
}
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params
const post = await prisma.post.findUnique({
where: { slug },
})
return (
<div>
<h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">{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 more functionality using Prisma Postgres as a database.
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.js and Prisma is the ultimate combo if you need a database in React apps!”
Guillermo Rauch
CEO & Founder, 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.
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.
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.
Blitz.js
Blitz.js is an application framework 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.
Fullstack Form Builder
This comprehensive 4-hour tutorial teaches you how to build a fullstack form application with drag & drop functionality, layout fields (titles, subtitles, paragraphs), and field types (text, number, dropdowns, dates, checkbox, text areas).