The Easiest Way to Work
with a Database in Next.js

Query data from your MySQL or PostgreSQL databases in a Next.js app using Prisma – a better ORM for JavaScript and TypeScript.

See code examples

What is Prisma?

Prisma is an open-source database toolkit (ORM) that drastically simplifies data modeling, migrations, and data access for SQL databases in Node.js.

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.

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);
  DATABASE
   query data at build time
   getStaticProps
  NEXT.JS PAGE
  Explore on GitHub
getServerSideProps
API Routes
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);
  DATABASE
   query data at build time
   getStaticProps
  NEXT.JS PAGE
  Explore on GitHub

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.

Featured Community Examples

Static sites with Next.js 9.3 and Prisma

Lee Robinson created a thorough tutorial for building static sites with Prisma and Next.js. Follow along to learn how to use Next.js getStaticProps and getStaticPaths to build a static site with dynamic data or check out his video workshop from Prisma Day 2020.

Read the tutorialBrowse codeWatch Prisma Day talk

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 websiteWatch Prisma Day talk

Building a fullstack Twitter clone with Next.js and Prisma

In this tutorial, Kunal Shah walks you through the process of building a social media application with Next.js, Prisma and SQLite entirely from scratch. This is a great read for Next.js newcomers and veterans to understand how Prisma and Next.js fit together.

Read the tutorialBrowse code

Get Involved

Join the Next.js + Prisma Community

Join us on Slack

Get help and engage with thousands of Next.js and Prisma develpers on Slack

Join Prisma Slack

Showcase on Twitter

We’d love to see what you’re building with Next.js and Prisma

Tweet #prisma+nextjs

Get Stickers

Show your Next.js + Prisma love with custom free stickers

Order stickers
Prisma Logo

Products

Prisma ClientPrisma 1 Cloud

Resources

DocsGet StartedAPI ReferenceExamplesHow to GraphQLData GuidePrisma with Next.js

Community

Meet the CommunitySlackGitHubDiscussionsGraphQL MeetupTypeScript Meetup

Company

AboutJobsCauses Black Lives MatterBlogTerms & PrivacyHTML Sitemap

Newsletter

Stay up to date with the latest features and changes to Prisma

Find Us

Prisma © 2018-2020.

Made with ❤️ in Berlin and worldwide