😊

Next.jsでDB操作とAPI、どちらを使うべき?メリット・デメリット徹底比較

に公開

はじめに

初めまして!おさわです💻
現在、東京でSESエンジニアとして働いています。

第一回目の記事は、Next.jsでのDB操作とAPI経由 の違いやメリット・デメリット、使い分けの基準を解説します。

Next.jsでデータベースを扱うとき、
「直接DBにアクセスするのが良いのか?」「API経由でアクセスしたほうが良いのか?」
迷ったことはありませんか?

私自身、API経由での使用経験しかないため、個人的な学習の意味合いも含めて、まとめてみました。
誤りへのツッコミもお待ちしております!
ぜひ最後まで読んでいただけると幸いです😄

Next.jsでデータを扱う方法

Nextjsで、データを操作する方法には2種類あります。
早速それぞれの詳細、メリット・デメリットをみていきましょう!

1. DBに直接アクセスする方法

1つ目に、サーバーコンポーネントやサーバーアクションから直接DBを操作する方法です。
PrismaDrizzle などの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層で統一管理
適した規模 小規模・個人 中〜大規模・チーム

あとがき

最後まで読んでいただき、ありがとうございました!🙏✨
皆さんの理解を深める助けになれば幸いです😄

Discussion