最も簡単なデータベース操作
Next.js での

JavaScript および TypeScript 向けのより優れた ORM である Prisma を使用して、Next.js アプリで MySQL、PostgreSQL、SQL Server データベースからデータをクエリします。

Prisma とは？

Prisma はデータ操作を容易にします。型安全な Node.js および TypeScript ORM、グローバルデータベースキャッシュ、接続プーリング、リアルタイムデータベースイベントを提供します。

クエリ

// Creating a new record
await prisma.user.create({
  firstName: “Alice”,
  email: “alice@prisma.io”
})

テーブル

id  firstName    email  
1   Bobby        bobby@tables.io
2   Nilufar      nilu@email.com
3   Jürgen       jums@dums.edu
4   Alice        alice@prisma.io

Prisma と Next.js の連携

Next.js は、クライアントとサーバーの境界線を曖昧にします。ビルド時 (SSG) またはリクエスト時 (SSR) のページ事前レンダリングをサポートしています。Next.js アプリでデータベースを操作する必要がある場合、Prisma は最適なコンパニオンです。ビルド時 (getStaticProps)、リクエスト時 (getServersideProps)、API ルートの使用、またはバックエンドをスタンドアロンサーバーに完全に分離するなど、Prisma を使用してデータベースにアクセスする方法を決定できます。

アプリをサーバーレスまたは Edge 環境にデプロイする場合は、データベースクエリを高速化するためにPrisma Accelerate をご確認ください。そのスケーラブルな接続プールは、トラフィックの急増時でもデータベースが接続を使い果たさないようにします。さらに、Edge でデータベースクエリの結果をキャッシュすることで、データベースの負荷を軽減しながら、応答時間を短縮できます。

getStaticProps

Prisma を使用した静的サイト生成

Next.js の getStaticProps 関数は、静的サイト生成 (SSG) のためにビルド時に実行されます。ブログやマーケティングサイトのような静的ページによく使用されます。getStaticProps 内で Prisma を使用してデータベースにクエリを送信できます

1// Fetch all posts (in /pages/index.tsx)
2export async function getStaticProps() {
3  const prisma = new PrismaClient()
4  const posts = await prisma.post.findMany()
5
6  return {
7    props : { posts }
8  }
9}

Next.js は props を React コンポーネントに渡し、動的データでページの静的レンダリングを可能にします。

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);

GitHub で見る

getServerSideProps

API ルート

スタンドアロンサーバー

Prisma を使用した静的サイト生成

1// Fetch all posts (in /pages/index.tsx)
2export async function getStaticProps() {
3  const prisma = new PrismaClient()
4  const posts = await prisma.post.findMany()
5
6  return {
7    props : { posts }
8  }
9}

Next.js は props を React コンポーネントに渡し、動的データでページの静的レンダリングを可能にします。

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);

GitHub で見る

「Next.js と Prisma は、React アプリでデータベースが必要な場合の究極の組み合わせです。ニーズに応じて、Next.js API ルート、getServerSideProps、または getStaticProps で Prisma を使用してデータベースにクエリを実行でき、完全なレンダリングの柔軟性と最高のパフォーマンスを実現できます🚀」

Guillermo Rauch -
CEO 兼創業者 Vercel の

Prisma と Next.js を選ぶ理由

完全なレンダリングの柔軟性

クライアントサイドレンダリング、サーバーサイドレンダリング、および静的サイト生成を使用してデータを表示します。

ゼロタイムデータベースクエリ

getStaticProps で Prisma を使用してデータベースにクエリを実行し、動的データを含む静的ページを生成します。

簡単なデプロイ

Prisma を利用した Next.js プロジェクトは、Next.js アプリ向けに構築されたプラットフォームである Vercel にデプロイできます。

エンドツーエンドの型安全性

Prisma と Next.js を組み合わせることで、アプリはデータベースから React コンポーネントまで一貫して型付けされるようになります。

シンプルなアーキテクチャ

シンプルなアプリケーションではアーキテクチャの複雑さが軽減されます – アプリケーションの成長に合わせてアーキテクチャをスケールできます。

役立つコミュニティ

Next.js と Prisma の両方に活気のあるコミュニティがあり、サポート、楽しいイベント、素晴らしい人々を見つけることができます。

T3 Stack でライブチャットアプリケーションを構築する

T3 スタック（Next.js、tRPC、Tailwind、TypeScript、Prisma）でライブチャットアプリケーションを構築する方法を学びましょう。ビデオには、データモデリングのベストプラクティス、および認証やリアルタイム更新などの機能も含まれています。これは、最新のウェブスタックへの包括的で実践的な詳細な掘り下げです！

チュートリアルを見る

Prisma Accelerate でアプリを高速化する

Prisma Accelerate は、特にサーバーレスおよび Edge 環境で、データベースクエリを高速化する接続プーラーおよびグローバルキャッシュです。ビデオを見て、その正確な使用方法と、Next.js アプリでそれを始める方法を学びましょう！

デモを見る

注目の Prisma & Next.js コミュニティの例

t3 Stack

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

GitHub で見る概要を見る

Next.js、Tailwind、tRPC、および Prisma ORM でフルスタックアプリを構築する

広範な型安全性の保証のおかげで、このチュートリアルで Francisco Mendes が教えるスタックは、今日ウェブアプリケーションを構築するための最も堅牢なものの 1 つです。楽しい食料品リストアプリケーションを作成して、エンドツーエンドの型安全性によるフルスタック開発について学びましょう。

チュートリアルを読む

Blitz.js

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

Blitz.js のウェブサイトを見る概要を見る

CoDox

モダンウェブ開発向けのスターターテンプレート！CoDox には、Next.js 13、TypeScript、Tailwind CSS、Shadcn、tRPC、Clerk Auth、その他多くの機能が付属しており、次期 Next.js アプリの初期ボイラープレートを節約できます。

CoDox のウェブサイトを見る GitHub で見る

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

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

チュートリアルを見る GitHub で見る

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

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

Discord

リアルタイムでチャットし、交流し、コミュニティメンバーやチームとアイデアを共有しましょう。

サーバーに参加する

GitHub

Prisma のソースコードを閲覧し、フィードバックを送信し、技術的な質問への回答を得てください。

GitHub で貢献する

Twitter

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

会話に参加する

最も簡単なデータベース操作Next.js での

Prisma とは？

Prisma と Next.js の連携

Prisma を使用した静的サイト生成

Prisma を使用した静的サイト生成

Prisma と Next.js を選ぶ理由

完全なレンダリングの柔軟性

ゼロタイムデータベースクエリ

簡単なデプロイ

エンドツーエンドの型安全性

シンプルなアーキテクチャ

役立つコミュニティ

T3 Stack でライブチャットアプリケーションを構築する

Prisma Accelerate でアプリを高速化する

注目の Prisma & Next.js コミュニティの例

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

Discord

GitHub

Twitter

最も簡単なデータベース操作
Next.js での