Fullstack (Prisma ORM v6) (/docs/orm/v6/overview/prisma-in-your-stack/fullstack)

For the complete Prisma documentation index, see llms.txt. A markdown version of any docs page is available by appending .md to its URL.

This page gives explains how to build fullstack applications with Prisma. It shows how Prisma fits in with fullstack frameworks and provides practical examples

Location: ORM > v6 > Core Concepts > Prisma in Your Stack > Fullstack

Fullstack frameworks, such as Next.js, Remix or SvelteKit, blur the lines between the server and the client. These frameworks also provide different patterns for fetching and mutating data on the server.

You can query your database using Prisma Client, using your framework of choice, from the server-side part of your application.

Here's a non-exhaustive list of frameworks and libraries you can use with Prisma ORM:

• Next.js
• Remix
• SvelteKit
• Nuxt
• Redwood
• t3 stack — using tRPC
• Wasp

[!NOTE] If you want to learn how to build an app with Next.js and Prisma ORM, check out this video tutorial.

Assume you have a Prisma schema that looks similar to this:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client"
  output   = "./generated"
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  Int?
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

You can now implement the logic for querying your database using Prisma Client API inside getServerSideProps, getStaticProps, API routes, or using API libraries such as tRPC and GraphQL.

// (in /pages/index.tsx)

// Alternatively, you can use `getStaticProps`
// in place of `getServerSideProps`.
export const getServerSideProps = async () => {
  const feed = await prisma.post.findMany({
    where: {
      published: true,
    },
  });
  return { props: { feed } };
};

Next.js will pass the props to your React component where you can display the data from your database.

// Fetch all posts (in /pages/api/posts.ts)
const prisma = new PrismaClient();

export default async function handle(req, res) {
  const posts = await prisma.post.findMany({
    where: {
      published: true,
    },
  });
  res.json(posts);
}

Note that you can use Prisma ORM inside of Next.js API routes to send queries to your database – with REST, GraphQL, and tRPC.

You can then fetch data and display it in your frontend.

You can find several ready-to-run examples that show how to fullstack apps with Prisma Client in the prisma-examples repository.

• GraphQL: This page gives explains how to build GraphQL servers with Prisma ORM. It shows how Prisma ORM fits into the GraphQL ecosystem and provides practical examples.
• Is Prisma ORM an ORM?: Learn about how Prisma ORM implements the Data Mapper ORM pattern and how it achieves the same goal as traditional ORMs without requiring you to map classes to tables as traditional ORMs do.
• REST: This page gives an overview of the most important things when building REST APIs with Prisma. It shows practical examples and the supported libraries.