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.

Supported frameworks

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

Fullstack app example (e.g. Next.js)

tip

If you want to learn how to build an app with Next.js and Prisma ORM, check out this comprehensive 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-js"
}

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.

getServerSideProps

// (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.

API Routes

// 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.

Ready-to-run fullstack example projects

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

Example	Description
Next.js (API Routes)	Fullstack Next.js app using getServerSideProps & API Routes
Next.js (GraphQL)	Fullstack Next.js app using GraphQL Yoga, Pothos, & Apollo Client
Next.js (tRPC)	Fullstack Next.js app using tRPC
Next.js (API Routes with auth)	Fullstack Next.js app using getServerSideProps, API Routes, & NextAuth
Remix	Fullstack Remix app using actions and loaders
SvelteKit	Fullstack Sveltekit app using actions and loaders
Nuxt (REST API)	Fullstack Nuxt app using API routes