Prismaのデータベースツールは、データアクセス層としてReactアプリを構築するのに最適です。Next.js、React Router、TanStack Startのようなメタフレームワークを使用している場合でも、独自のAPI層を構築している場合でも、Prismaはデータベースワークフローに最高のDXを提供します。

React Server Components

React Server Componentsを使用すると、コンポーネントコードから直接Prismaでデータベースにアクセスできます。これらのコンポーネントはサーバー上でのみ実行されるため、認証情報を公開したりAPIエンドポイントを作成したりすることなくデータベースをクエリできます。データはサーバー上でHTMLにレンダリングされ、クライアントにストリーミングされるため、JavaScriptバンドルサイズへの影響はゼロです。

// UserList.tsx (Server Component)
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function UserList() {
  // Direct database access in a server component
  const users = await prisma.user.findMany({
    select: {
      id: true,
      name: true,
      email: true,
    },
  })

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  )
}

Next.js App Router

Remix

React Router 7 Framework

// UserList.tsx (Server Component)
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function UserList() {
  // Direct database access in a server component
  const users = await prisma.user.findMany({
    select: {
      id: true,
      name: true,
      email: true,
    },
  })

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  )
}

リソース

Next.jsでPrisma ORMを使用する方法

Prisma Postgresを使ってフルスタックのNext.js 15アプリをゼロから構築する方法を学びましょう！このチュートリアルでは、`create-next-app`を使ったアプリのブートストラップから始め、Prisma Postgresをデータベースとして使用して段階的に機能を追加していく手順を説明します。

Next.js Vercel

Next.js 15 + Prisma Postgres 認証の例

このブログアプリケーションのデモでは、Prisma PostgresとNext.js 15を使用してログイン機能を構築する方法を示します。デフォルトで「GitHubでログイン」を使用しており、他の認証プロバイダーにも簡単に拡張できます。

Prisma Postgres

注目のPrisma & Reactコミュニティの例

モダンSaaSスターターキット：next-forge

Reactを使ったモダンSaaSアプリのスターターテンプレート！next-forgeには、Next.js 15、認証、DB＆ORM、決済、ドキュメント、ブログ、o11y、分析、メールなど、多くの機能が付属しており、次のNext.js SaaSアプリの初期ボイラープレート作業を省くことができます。

テンプレートを探索

Remix Blues Stack

Remix Blues Stackは、Fly.ioでのDockerベースのマルチリージョンデプロイメント、Prisma ORMを介したPostgreSQLデータベース統合、Cookieベースのセッションを使用した認証を備えた、完全な本番対応テンプレートを提供します。堅牢なテストフレームワーク、CI/CD用のGitHub Actions、効率的な開発体験のためのTailwind CSSによるスタイリングが含まれています。

GitHubで探索

t3 Stack

t3は、シンプルさ、モジュール性、フルスタックのタイプセーフティに焦点を当てたウェブ開発スタックです。Next.js、tRPC、Tailwind、TypeScript、Prisma、NextAuthが含まれています。

GitHubで探索

Blitz.js

Blitz.jsは、Next.jsとPrismaの上に構築されたアプリケーションフレームワークです。Ruby on Railsのようなサーバーレンダリングフレームワークのシンプルさと慣例を復活させつつ、開発者がReactとクライアントサイドレンダリングについて愛するすべてを維持します。

詳細を見る

フルスタックフォームビルダー

この4時間の包括的なチュートリアルでは、フルスタックフォームアプリケーションの構築方法を学びます。フォームはレスポンシブで、ドラッグ＆ドロップ機能に対応し、タイトル、サブタイトル、段落などの様々なレイアウトフィールド、そしてテキスト、数値、ドロップダウン、日付、チェックボックス、テキストエリアなどの様々な種類のフィールドタイプを備えています。

チュートリアルを見る

Prismaコミュニティに参加する

私たちのコミュニティメンバーやPrismaチームと交流できる複数のチャンネルがあります。

Discord

リアルタイムでチャットしたり、交流したり、コミュニティメンバーや私たちのチームとアイデアを共有したりできます。

さらに詳しく

GitHub

Prismaのソースコードを閲覧し、フィードバックを送信し、技術的な質問への回答を得ることができます。

さらに詳しく

X

最新情報を入手し、私たちのチームと交流し、活気あるオンラインコミュニティの不可欠な一部になりましょう。

さらに詳しく

YouTube

最新情報を入手し、私たちのチームと交流し、活気あるオンラインコミュニティの不可欠な一部になりましょう。

さらに詳しく