Query data from MySQL, PostgreSQL & SQL Server databases in Next.js apps with Prisma – a better ORM for JavaScript and TypeScript.
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 email1 Bobby bobby@tables.io2 Nilufar nilu@email.com3 Jürgen jums@dums.edu4 Alice alice@prisma.io
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.
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()56 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);
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()56 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 🚀”
Display your data using client-side rendering, server-side rendering and static site generation.
Query your database with Prisma in getStaticProps to generate a static page with dynamic data.
Prisma-powered Next.js projects can be deployed on Vercel, a platform built for Next.js apps.
Pairing Prisma with Next.js ensures your app is coherently typed, from the database to your React components.
Less architectural complexity for simple applications – scale the architecture as your application grows.
Both Next.js and Prisma have vibrant communities where you find support, fun events and awesome people.
This guide is a thorough introduction to building production-ready fullstack apps using Next.js, Prisma and PostgreSQL. It includes authentication via NextAuth.js and deployment via Vercel.
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.
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.
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.
Get Involved
Get help and engage with thousands of Next.js and Prisma developers on Slack
Join Prisma SlackWe’d love to see what you’re building with Next.js and Prisma
Tweet #prisma+nextjsStay up to date with the latest features and changes to Prisma
Prisma © 2018-2021.
Made with ❤️ in Berlin and worldwide