はじめに
先日、Next.js の勉強会で、Prisma を使った実装について取り上げました 🫐
データベースとのやり取りは、モダンな Web アプリケーションにおいて欠かせない要素です。
しかし、データベースの操作は少し複雑で、SQL の知識も必要だったりと、
なかなか手を出しにくいと感じている方も、多いです。
今回は、Next.js で Prisma を使った実装について調査したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌
Prisma とは？
Prisma は、Node.js と TypeScript 向けのオープンソースの ORM です。
ORM については次の章で詳しく説明しますが、簡単に言うとデータベース操作を簡単にしてくれるツールです！
Prisma の主な特徴は以下のとおりです：
1. 型安全性
Prisma は TypeScript との相性が抜群で、コンパイル時にデータベースの型エラーを検出してくれます。
これにより、実行時エラーを大幅に減らすことができます。
DB の型をフルスタックなアプリ全体で共有できるのは、強力ですね！
2. 直感的な API
SQL を書く必要がなく、JavaScript のオブジェクトを操作するような感覚でデータベース操作ができます。
3. データベース非依存
- PostgreSQL
- MySQL
- SQLite
- MongoDB
、、など、様々なデータベースに対応しています！
なので、データベースを変更する際も、アプリケーションコードをほとんど変更する必要がありません。
ちなみに、ORM とは？
ORM（Object-Relational Mapping）とは、データベースのテーブルをオブジェクトとして操作できる技術です。
簡単に言うと、プログラミング言語のオブジェクトで定義したメソッドで、SQL を書かずにデータベースの操作が可能なツールということです。
ORM を使うメリットは、：
- SQL を書かずにデータベース操作が可能
- プログラミング言語のメソッドで直感的に操作できる
- 型安全性の確保（特に TypeScript との組み合わせ）
- データベースの種類（MySQL、PostgreSQL など）を抽象化
つまり、Prisma を使うことで、SQL を書かなくても、
JavaScript（TypeScript）のコードだけで、データベース操作ができるようになります 👍
Next.js への導入【Prisma】
Prisma は、Next.js 13 以降の App Router や Server Components とも相性が良いです！
さっそく、Next.js への導入を確認してみましょう！
1. ライブラリのインストール
# Prisma CLI とクライアントの両方をインストール
npm install prisma @prisma/client
2. Prisma の初期化
npx prisma init
3. データベース接続の設定
# .env ファイル
DATABASE_URL="postgresql://username:password@localhost:5432/mydb"
4. スキーマの定義
// prisma/schema.prisma
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
author User @relation(fields: [authorId], references: [id])
authorId Int
}
5. マイグレーションとクライアントの生成
# データベースにテーブルを作成
npx prisma migrate dev --name init
# Prisma クライアントを生成
npx prisma generate
6. Next.js での使用
// lib/prisma.ts
import { PrismaClient } from "@prisma/client";
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
そして、API のコード例は、以下のようになります。
// app/api/users/route.ts
import { NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
export async function GET() {
const users = await prisma.user.findMany({
include: { posts: true },
});
return NextResponse.json(users);
}
export async function POST(request: Request) {
const { name, email } = await request.json();
const user = await prisma.user.create({
data: { name, email },
});
return NextResponse.json(user);
}
このシンプルなコードで、型安全なデータベース操作が実装できます！！
もちろん、公式ドキュメントを参考にして、
さらに、部分的にカスタマイズしていくことが、可能です！
なぜ Prisma なのか？
個人的には、Prisma の魅力は、「開発体験が良い」ということに尽きます！
マルチデータベース対応なので、
- PostgreSQL、MySQL、SQLite など多数のデータベースを簡単にセットアップできます
- 開発時・本番時で、DB を切り替えることも簡単です
- Supabase や、MongoDB などを使用してサービスを立ち上げ、将来的な移行コストも Prisma を使用していることで減ります
そして何より、
- スキーマから自動生成される型定義により、フルスタックで型安全な開発が可能です
- 型生成・マイグレーション・Prisma Studio などをコマンド１つで実行できます
公式ドキュメントが充実しているのも、使いやすいポイントですね 😎
おわりに
最後まで読んでいただだき、ありがとうございます 🥳
ハンズオン形式で、
実際に手を動かして Prisma+Next.js を学習したい場合は、以下の教材もチェックしてみてください！！
そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion