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.
What is Prisma?
Prisma is an open-source ORM that drastically simplifies data modeling, migrations, and data access for SQL databases in Node.js and TypeScript.
// Creating a new recordawait prisma.user.create({ firstName: “Alice”, email: “alice@prisma.io”})id firstName email 1 Bobby bobby@tables.io2 Nilufar nilu@email.com3 Jürgen jums@dums.edu4 Alice alice@prisma.ioHow 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.
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);
NEXT.JS PAGEStatic 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);“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!
Next.js and Prisma: Databases in Serverless Made Easy
In this talk from Next.js Conf, Daniel delves into how Prisma is the perfect companion for building database powered Next.js applications covering all the data fetching patterns that Prisma enables in Next.js, how the Prisma Data Proxy helps you scale your app without crushing your database, and the future of databases at the edge.
Featured Prisma & Next.js Community Examples
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.
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.
Build a Fullstack App with Next.js, Supabase & Prisma
In this free and comprehensive course, Grégory D'Angelo walks you through the process of building a fullstack app called SupaVacation — an online marketplace for vacation rentals. The app is built using Prisma, Next.js, NextAuth, and Supabase.
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.
Database access on the Edge with Next.js, Vercel & Prisma Data Proxy
The Edge enables application deployment across the globe. This article explores what Edge environments are, the challenges that arise when working in Edge environments and how to access databases on the Edge using the Prisma Data Proxy.
Get Involved
Join the Next.js + Prisma Community
Join us on Slack
Get help and engage with thousands of Next.js and Prisma developers on Slack
Join Prisma SlackShowcase on Twitter
We’d love to see what you’re building with Next.js and Prisma
Tweet #prisma+nextjs