Prismaの開発生産性の高いデータベースツールを使って、高性能で型安全なNext.jsアプリを構築しましょう。これらは世界で 最も人気のあるTypeScript ORM であり、コールドスタートのない初のサーバーレスデータベースです。
Next.js と Prisma を試すユニカーネル上に構築されたPrisma Postgresは、ベアメタルサーバーで動作し、最高のパフォーマンスと無限のスケーラビリティを提供します。
従量課金制、インフラ管理不要、そして コールドスタートゼロの初のサーバーレスデータベースです。
クライアントサイドレンダリング、サーバーサイドレンダリング、静的サイト生成を使用してデータを表示します。
任意のデータベースクエリにキャッシュ戦略を追加すると、その結果はユーザーの近くにキャッシュされ、最高のパフォーマンスとUXを実現します。
PrismaとNext.jsを組み合わせることで、データベースからReactコンポーネントまで、アプリが整合性のある型付けされていることを保証します。
Next.jsとPrismaの両方には活気あるコミュニティがあり、サポート、楽しいイベント、素晴らしい開発者を見つけることができます。
Prismaのデータベースツールは、Next.jsアプリケーションの構築に最適です。これらは、サーバーコンポーネント(静的および動的)、サーバーアクション、ルートハンドラ、およびスタンドアロンサービスのためのデータアクセスレイヤーとして機能します。
Next.js 13+では、データフェッチの扱い方に根本的な変化が導入されました。App Routerのデフォルトであるサーバーコンポーネントを使用すると、追加のラッパーや特殊な関数なしで、コンポーネント内で直接データをフェッチできます。これにより、Prismaをコンポーネントで直接使用でき、可能な場合は自動的に静的生成が行われます。
ビルド時に静的に生成されるブログページを実装する方法をご紹介します。データフェッチはサーバーサイドで行われ、HTMLはビルド中に一度生成されます。
// app/blog/[slug]/page.tsximport { PrismaClient } from '@prisma/client'const prisma = new PrismaClient()// Return a list of `params` to populate the [slug] dynamic segmentexport 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 slugconst post = await prisma.post.findUnique({where: { slug: params.slug },})// Simple demo renderingreturn (<div><h1>{post?.title || 'Post not found'}</h1><p>{post?.content || 'No content available'}</p></div>)}
Next.js 13+では、データフェッチの扱い方に根本的な変化が導入されました。App Routerのデフォルトであるサーバーコンポーネントを使用すると、追加のラッパーや特殊な関数なしで、コンポーネント内で直接データをフェッチできます。これにより、Prismaをコンポーネントで直接使用でき、可能な場合は自動的に静的生成が行われます。
ビルド時に静的に生成されるブログページを実装する方法をご紹介します。データフェッチはサーバーサイドで行われ、HTMLはビルド中に一度生成されます。
// app/blog/[slug]/page.tsximport { PrismaClient } from '@prisma/client'const prisma = new PrismaClient()// Return a list of `params` to populate the [slug] dynamic segmentexport 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 slugconst post = await prisma.post.findUnique({where: { slug: params.slug },})// Simple demo renderingreturn (<div><h1>{post?.title || 'Post not found'}</h1><p>{post?.content || 'No content available'}</p></div>)}
Reactアプリでデータベースが必要なら、Next.jsとPrismaは 究極の組み合わせ です! 🚀
モダンSaaSアプリ用のスターターテンプレート!next-forgeには、Next.js 15、認証、DB & ORM、決済、ドキュメント、ブログ、o11y、分析、メールなどが含まれており、次のNext.js SaaSアプリの初期ボイラープレート作業を省くことができます。
Next.js App RouterでPrismaを使用するためのベストプラクティスを学びましょう!サーバーコンポーネント、サーバーアクション、エッジミドルウェア、さらに効率的なクエリ、マイグレーションの処理、Vercelへのデプロイについて探ります。データベースワークフローを完璧にし、シームレスにスケールさせましょう!
Blitz.jsは、Next.jsとPrismaの上に構築されたアプリケーションフレームワークです。Ruby on Railsのようなサーバーレンダリングフレームワークのシンプルさと慣習を取り戻しつつ、Reactとクライアントサイドレンダリングに関する開発者が愛するすべてを保持しています。
この4時間の総合チュートリアルでは、フルスタックのフォームアプリケーションを構築する方法を説明します。このフォームはレスポンシブで、ドラッグ&ドロップ機能に対応し、タイトル、サブタイトル、段落などの様々なレイアウトフィールドや、テキスト、数値、ドロップダウン、日付、チェックボックス、テキストエリアなどの様々な種類のフィールドタイプを備えています。
コミュニティメンバーやPrismaチームと交流できる複数のチャネルがあります。