Next.jsでデータベースを扱う最も簡単な方法

Prismaの開発生産性の高いデータベースツールを使って、高性能で型安全なNext.jsアプリを構築しましょう。これらは世界で 最も人気のあるTypeScript ORM であり、コールドスタートのない初のサーバーレスデータベースです。

Next.js と Prisma を試す

Next.js と Prisma を組み合わせる理由

高性能ウェブアプリのために構築

ユニカーネル上に構築されたPrisma Postgresは、ベアメタルサーバーで動作し、最高のパフォーマンスと無限のスケーラビリティを提供します。

サーバーレス、コールドスタートなし

従量課金制、インフラ管理不要、そして コールドスタートゼロの初のサーバーレスデータベースです。

柔軟なデータ取得とレンダリング

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

内蔵されたグローバルキャッシュ

任意のデータベースクエリにキャッシュ戦略を追加すると、その結果はユーザーの近くにキャッシュされ、最高のパフォーマンスとUXを実現します。

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

PrismaとNext.jsを組み合わせることで、データベースからReactコンポーネントまで、アプリが整合性のある型付けされていることを保証します。

役立つコミュニティ

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

PrismaとNext.jsの連携方法

Prismaのデータベースツールは、Next.jsアプリケーションの構築に最適です。これらは、サーバーコンポーネント(静的および動的)、サーバーアクション、ルートハンドラ、およびスタンドアロンサービスのためのデータアクセスレイヤーとして機能します。

静的データ

Prismaによる静的サイト生成

Next.js 13+では、データフェッチの扱い方に根本的な変化が導入されました。App Routerのデフォルトであるサーバーコンポーネントを使用すると、追加のラッパーや特殊な関数なしで、コンポーネント内で直接データをフェッチできます。これにより、Prismaをコンポーネントで直接使用でき、可能な場合は自動的に静的生成が行われます。

ビルド時に静的に生成されるブログページを実装する方法をご紹介します。データフェッチはサーバーサイドで行われ、HTMLはビルド中に一度生成されます。

// app/blog/[slug]/page.tsx
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
const posts = await prisma.post.findMany()
return posts.map((post) => ({
slug: post.slug,
}))
}
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({ params }: { params: { slug: string } }) {
// Fetch the post based on slug
const post = await prisma.post.findUnique({
where: { slug: params.slug },
})
// Simple demo rendering
return (
<div>
<h1>{post?.title || 'Post not found'}</h1>
<p>{post?.content || 'No content available'}</p>
</div>
)
}
動的データ
サーバーアクション
APIルート
クライアントコンポーネント

Prismaによる静的サイト生成

Next.js 13+では、データフェッチの扱い方に根本的な変化が導入されました。App Routerのデフォルトであるサーバーコンポーネントを使用すると、追加のラッパーや特殊な関数なしで、コンポーネント内で直接データをフェッチできます。これにより、Prismaをコンポーネントで直接使用でき、可能な場合は自動的に静的生成が行われます。

ビルド時に静的に生成されるブログページを実装する方法をご紹介します。データフェッチはサーバーサイドで行われ、HTMLはビルド中に一度生成されます。

// app/blog/[slug]/page.tsx
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
const posts = await prisma.post.findMany()
return posts.map((post) => ({
slug: post.slug,
}))
}
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({ params }: { params: { slug: string } }) {
// Fetch the post based on slug
const post = await prisma.post.findUnique({
where: { slug: params.slug },
})
// Simple demo rendering
return (
<div>
<h1>{post?.title || 'Post not found'}</h1>
<p>{post?.content || 'No content available'}</p>
</div>
)
}

Reactアプリでデータベースが必要なら、Next.jsとPrismaは 究極の組み合わせ です! 🚀

Guillermo Rauch
Guillermo Rauch -
CEO 兼 創設者
Vercel

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

モダンSaaSアプリ用のスターターテンプレート!next-forgeには、Next.js 15、認証、DB & ORM、決済、ドキュメント、ブログ、o11y、分析、メールなどが含まれており、次のNext.js SaaSアプリの初期ボイラープレート作業を省くことができます。

Next.js App RouterでPrismaを使用するためのベストプラクティスを学びましょう!サーバーコンポーネント、サーバーアクション、エッジミドルウェア、さらに効率的なクエリ、マイグレーションの処理、Vercelへのデプロイについて探ります。データベースワークフローを完璧にし、シームレスにスケールさせましょう!

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

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

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

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

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

Discord

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

もっと見る

GitHub

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

もっと見る

X

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

もっと見る

YouTube

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

もっと見る
© . All rights reserved.