メインコンテンツにスキップ

フルスタック

Next.js、Remix、SvelteKitなどのフルスタックフレームワークは、サーバーとクライアントの境界線を曖昧にしています。これらのフレームワークは、サーバー上でのデータのフェッチと変更のためのさまざまなパターンも提供しています。

アプリケーションのサーバーサイド部分から、お好みのフレームワークを使用してPrisma Clientを使用してデータベースにクエリを実行できます。

サポートされているフレームワーク​

Prisma ORMで使用できるフレームワークとライブラリの網羅的ではないリストを以下に示します。

フルスタックアプリの例（例：Next.js）​

ヒント

Next.jsとPrisma ORMでアプリを構築する方法を学びたい場合は、こちらの包括的なビデオチュートリアルをご覧ください。

次のようなPrismaスキーマがあると仮定します。

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[]
}

これで、getServerSideProps、getStaticProps、APIルート内、またはtRPCやGraphQLなどのAPIライブラリを使用して、Prisma Client APIを使用してデータベースにクエリを実行するロジックを実装できます。

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は、データベースからのデータを表示できるReactコンポーネントにpropsを渡します。

APIルート​

// 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)
}

Next.js APIルート内でPrisma ORMを使用して、REST、GraphQL、およびtRPCを使用してデータベースにクエリを送信できることに注意してください。

その後、フロントエンドでデータをフェッチして表示できます。

すぐに実行できるフルスタックのサンプルプロジェクト​

prisma-examplesリポジトリには、Prisma Clientを使用してフルスタックアプリを構築する方法を示す、すぐに実行できるサンプルがいくつかあります。

例説明
Next.jsフルスタック Next.js 15 アプリ
Next.js (GraphQL)GraphQL Yoga、Pothos、& Apollo Clientを使用したフルスタックNext.jsアプリ
Remixアクションとローダーを使用したフルスタックRemixアプリ
SvelteKitアクションとローダーを使用したフルスタックSveltekitアプリ
NuxtAPIルートを使用したフルスタックNuxtアプリ