はじめに
初めまして！おさわです💻
現在、東京でSESエンジニアとして働いています。
第一回目の記事は、Next.jsでのDB操作とAPI経由 の違いやメリット・デメリット、使い分けの基準を解説します。
Next.jsでデータベースを扱うとき、
「直接DBにアクセスするのが良いのか？」「API経由でアクセスしたほうが良いのか？」
迷ったことはありませんか？
私自身、API経由での使用経験しかないため、個人的な学習の意味合いも含めて、まとめてみました。
誤りへのツッコミもお待ちしております！
ぜひ最後まで読んでいただけると幸いです😄
Next.jsでデータを扱う方法
Nextjsで、データを操作する方法には2種類あります。
早速それぞれの詳細、メリット・デメリットをみていきましょう！
1. DBに直接アクセスする方法
1つ目に、サーバーコンポーネントやサーバーアクションから直接DBを操作する方法です。
Prisma や Drizzle などのORMを利用し、Nextjsのサーバーから直接SQLをDBに送信します。
↓ app routerを使った例
// app/page.tsx
import { prisma } from "@/lib/prisma";
// app routerでは、page.tsxはデフォルトでSSRになる
export default async function Page() {
const users = await prisma.user.findMany();
return <pre>{JSON.stringify(users, null, 2)}</pre>;
}
メリット
-
高速（API通信を挟まない）
-
実装がシンプル
-
APIサーバー不要でコスト削減
デメリット
-
フロントとDBが密結合になる
-
認証やセキュリティを自前で実装する必要あり
-
将来的なスケールに弱い
2. API経由でアクセスする方法
もう一つは、バックエンドとフロントを分離し、APIを叩く方法です。
REST API / GraphQL / tRPC などをのバックエンドサーバーを構築し、
フロントエンド（Nextjsなど）はAPIを叩くだけ
多くのプロジェクトでは、こちらの手法のものが多いのでは、と個人的に感じます🤔💭
↓ 例: API Routes経由
// app/api/users/route.ts
import { prisma } from "@/lib/prisma";
import { NextResponse } from "next/server";
export async function GET() {
const users = await prisma.user.findMany();
return NextResponse.json(users);
}
// app/page.tsx フロントからの呼び出し
export default async function Page() {
const res = await fetch("/api/users");
const users = await res.json();
return <pre>{JSON.stringify(users, null, 2)}</pre>;
}
メリット
-
モバイルアプリや外部サービスと共通APIで連携可能
-
認証や認可をAPI層に集約できる
-
マイクロサービスや分散開発に強い
デメリット
-
ネットワーク通信の分だけ遅延が発生
-
APIサーバーの構築・運用コストがかかる
-
実装が複雑になりやすい
使い分けの指針
-
個人開発や小規模プロジェクト → DB直接アクセスで十分
-
チーム開発・中規模以上 → API経由で分離した方が安全
-
将来的にモバイルアプリや外部サービス連携を予定 → 最初からAPI経由を検討
-
Next.jsだけで完結したい場合 → DB直接アクセスでシンプルに
まとめ
-
DB直接アクセス → 高速でシンプルだが、拡張性に欠ける
-
API経由 → 柔軟でスケーラブルだが、構築コストが高い
-
選択の基準は「プロジェクトの規模」と「将来の拡張性」
| 項目 | DB直接アクセス | API経由 |
|---|---|---|
| パフォーマンス | ◎ 高速 | △ 通信オーバーヘッドあり |
| 実装のシンプルさ | ◎ 簡単 | △ 複雑 |
| 拡張性 | △ 弱い | ◎ 強い |
| セキュリティ | △ 実装次第 | ◎ API層で統一管理 |
| 適した規模 | 小規模・個人 | 中〜大規模・チーム |
あとがき
最後まで読んでいただき、ありがとうございました！🙏✨
皆さんの理解を深める助けになれば幸いです😄