Vercelと相性のいい技術まとめ｜DB・認証・AI・CMS・決済・モニタリングを用途別に整理

「Vercelで何か作るとき、相性が良い技術ってあるの？」「周辺サービスを選ぶときに何を基準にすればいい？」

Vercel単体ではフロントエンド配信と軽い関数実行までしかカバーしないので、DB・認証・決済・通知・モニタリングなどは外部サービスとの組み合わせが前提になります。 ただ、選択肢が多すぎて初見では迷いやすいので、「まずはこの組み合わせから」の鉄板スタックを知っておくと立ち上がりが早くなります。

この記事では、2026年6月時点の各サービス公式ドキュメントを確認しながら、Vercelと組み合わせやすい技術を 用途カテゴリ別に網羅 し、さらに代表的な2構成を実際に組んだときの つまずきと料金の膨らみ方 まで踏み込みます。 Vercel そのものは Vercelとは？何ができる？Next.jsとの相性・向いている案件・注意点を解説、用語の整理は 初心者が知っておくべきVercelの基礎用語まとめ もあわせて読むと立ち位置が見えやすいです。

この記事は2026年6月時点の情報をもとに書いています。各サービスは料金・機能が変わりやすいので、本番採用前は公式ドキュメントの最新情報も合わせて確認してください。

まず結論：定番スタックの全体像

「Vercelで新規アプリを立ち上げるなら、まずこれを試す」という鉄板構成があります。

それぞれのカテゴリで「なぜそれが選ばれるか」を順に見ていきます。

フレームワーク

Vercelの土台となる選択。「どのフレームワークで書くか」で他のすべての判断が変わります。

特にこだわりがなければ Next.js が無難。Vercelの全機能(Image Optimization、SSR/ISR、Edge Functions、AI SDK連携)を最大限使えます。 他フレームワークの違いは Next.jsは他のフレームワークと何が違う？、Astroは Astroとは？何が特徴のWebフレームワークなのか初心者向けに整理 もあわせて読むと選びやすいです。

データベース

VercelはDB本体を持たない設計なので、ここの選択がアプリの性格を左右します。

迷ったら Supabase が最も無難。DB + 認証 + Storage がワンストップで、Vercelとの接続例も豊富。 本格スケールが見えているなら Neon か PlanetScale。Redisはキャッシュ用途で Upstash がほぼ一択(サーバーレス課金で安価)。 DBアクセスを型安全にしたいなら ORM(Prisma / Drizzle)を併用するのが定番です。

認証

ログイン機能を自前実装すると詰まりやすいので、認証はSaaS利用が定番。

「数時間で本格認証画面まで欲しい」なら Clerk。「OSS + 自由度」重視なら NextAuth.js(Auth.js)。 Supabase を採用するなら Supabase Auth がそのまま使えてシンプルです。 認証の基礎は Q&A形式: 認証(AuthN)と認可(AuthZ)を一言で言うと？、トークンの仕組みは JWT の解説も参考になります。

代表構成を組んだときのつまずき(ここが本題)

カテゴリ別の一覧だけ見ると「好きな組み合わせを選べばいい」ように見えますが、実際に組むと 認証とDBの権限連携 や ロックイン でつまずきます。 ここでは代表的な2構成を取り上げ、どこで詰まりやすいかを具体的に整理します。

構成A：Supabase全部入りのつまずき

Supabaseは認証ユーザーが auth.users テーブルに入り、RLSポリシーで auth.uid() をそのまま使えるのが最大の利点です。 一方でつまずきやすいのが RLSの初期状態 です。

• 現象：テーブルを作って Vercel から anon キーで読みに行くと、ローカルでは見えていた行が本番で [](空配列)になる。
• 原因：RLSを有効化したのにポリシーを1つも書いていない。RLSは「ポリシーが無い＝全拒否」がデフォルトのため、anon キー経由のアクセスが全部弾かれる。
• 確認手順：Supabase SQL Editor で select * from pg_policies where tablename = 'posts'; を実行し、行が0なら未設定。さらに select auth.uid(); がサーバー側で null を返していないかを確認する。
• 回避：create policy "owner read" on posts for select using (auth.uid() = user_id); のように所有者ポリシーを明示する。service_role キーで握りつぶすのは CORS 越しのクライアントには絶対に渡さない。

もう一つのつまずきがロックインです。Supabaseの認証情報・Storageのオブジェクト所有権・RLSは Supabaseの auth スキーマに深く結びついています。 あとから「認証だけ別サービスへ」と決めても、auth.uid() を参照しているポリシーを全部書き換え、ユーザーIDの対応表を作り直す必要があり、移行が想像以上に重くなります。

構成B：Clerk分離のつまずき

Clerkは認証UIとセッション管理が圧倒的に楽ですが、DBは別サービス(Supabase等)になるため、「Clerkでログインした人」と「DBの行の持ち主」をどう一致させるか が最初の関門です。

• 現象：Clerkでログインは成功しているのに、Supabaseから自分のデータを取ると [] が返る。エラーは出ない。
• 原因：Supabaseクライアントに Clerk のセッショントークンを渡しておらず、RLSポリシー内の auth.jwt() が null になっている。anon キーだけだと「未ログイン扱い」になる。
• 確認手順：ブラウザのネットワークタブで Supabaseへのリクエストヘッダに Authorization: Bearer ... が乗っているか確認する。乗っていなければトークン受け渡しが抜けている。
• 回避：2025年4月以降、Clerkの旧JWTテンプレート方式は非推奨になり、SupabaseのThird-Party Auth(ネイティブ統合)が推奨です。Supabaseに Clerk をサードパーティ認証プロバイダとして登録し、RLSは (auth.jwt()->>'sub') = user_id のように Clerk の sub クレームで判定します。これでリクエスト毎のトークン再取得や、SupabaseのJWTシークレットをClerkへ渡す作業が不要になります。

ロックインの観点では、構成Bは DBと認証が分離している分だけ移行は軽い のが利点です。 認証をClerkから別サービスへ移すときも、DB側は「user_id 列に文字列が入っている」だけなので、ID体系を合わせればポリシーの大改修は避けられます。 逆に「最短で動かす」点ではトークン受け渡しの一手間があり、構成Aより初動が遅くなります。

結論として、「とにかく速く1つで完結させたいなら構成A、認証体験を最優先しつつ後で剥がせる余地を残したいなら構成B」 という選び分けになります。 どちらも「権限連携のつまずきは現象が同じ(データが空で返る)」なので、上の確認手順を最初に押さえておくと無駄な時間を使わずに済みます。

料金が掛け算で膨らむ実例

無料枠では各サービスが太っ腹なので0円で動きますが、課金プランに入ると Vercel × DB × 認証 × LLM が別々に積み上がり、合計が急に効いてきます。 ここでは2026年6月時点の公開価格で、構成B(Next.js on Vercel + Supabase + Clerk)の概算を出します。

これを「月間アクティブユーザー(MAU)」の規模で並べると、掛け算の効き方が見えます(1シート・1プロジェクト前提の概算)。

ここで効いてくるのが Clerkの $0.02/MAU が線形に伸びる 点です。1万MAUまでは無料でも、5万MAUで $825、20万MAUで $3,825 と、認証だけで他の合計を上回ります。 さらにAI機能を足すと、LLMトークン課金が「リクエスト数 × ユーザー数」で別軸に乗るため、Vercelの関数実行回数とも掛け算になります。

MAU課金が重いと判断したら、認証を Supabase Auth(MAU課金が緩い)や NextAuth.js(自前・無料)へ寄せる選択肢も出てきます。 ただし前章のとおり、認証を後から差し替えると権限連携を作り直すコストが発生するので、「規模が読めているならコスト構造で先に決める」 のが安全です。 AI APIの料金感は AI APIの料金はどう見る？トークン課金・モデル差・コスト設計の基本、帯域コストは 帯域コストとは？クラウドで意外と見落とされる料金 も参考になります。

AI・LLM連携

Vercelが特に力を入れている領域。AI機能を含むアプリならこの組み合わせがほぼ標準。

最初に触るなら AI SDK + OpenAI または Anthropic の2点セット。これだけで ChatGPT風のチャットUIが短時間で組めます。 複数モデルを切り替えながら使うなら、AI Gateway や AI SDK のプロバイダ抽象化が便利。 コスト削減は AIツールのトークン使用量を減らすコツ も参考になります。

CMS・コンテンツ管理

ブログ、メディア、コーポレートサイトでの選択。

「日本国内で運用」なら MicroCMS が分かりやすい。「本格メディア」なら Sanity か Contentful。 個人ブログや技術ドキュメントなら、リポジトリ内 MDX(Markdown + JSX)の方がシンプルなことが多いです。CMSは外部API取得が中心になるため、表示は SSG や SSR のどちらに寄せるかで CDN キャッシュ戦略が変わります。

スタイリング・UI

「見た目」を作る部分。Vercel前提なら ほぼ決まった鉄板組み合わせがあります。

2026年現在の標準は Tailwind CSS + shadcn/ui。ほぼセットで導入されます。 v0で生成されるUIもこの組み合わせを前提にしているので、AI生成からそのまま採用する流れがスムーズです。

決済

サブスク、買い切り、マーケットプレイス、いずれも事実上 Stripe一強。

特にこだわりがなければ Stripe。Next.js + Stripe のサンプルが Vercel公式ガイドにも多数あります。 決済の状態同期は Webhook 受信が要になるので、署名検証とリトライ前提の設計を最初から入れておきます。 日本の消費税やインボイス制度を業者に任せたいなら Lemon Squeezy や Paddle のようなMoR(Merchant of Record)型サービスが楽になります。

メール送信

Vercel の Function からメール送信するなら、専用サービスを使うのが安全。

新規なら Resend + React Email がほぼ標準セット。Next.jsとの相性が良く、Vercelのテンプレートにも採用されています。 送信元ドメインの認証では DNS にSPF/DKIM/DMARCレコードを足す必要があるので、独自ドメイン運用なら早めに整えておきます。 メール基盤の判断は VPSからのメール送信は Resend / Brevo / レンタルサーバーSMTP のどれが現実的？ もあわせて読むと整理しやすいです。

モニタリング・観測性

本番運用ではほぼ必須のカテゴリ。

最低限揃えるなら Sentry + Vercel Analytics の2点セット。これでエラー検知とアクセス解析がカバーできます。 本格運用に入ったら PostHog や LogRocket でユーザー行動の深掘りも検討範囲に入ります。

ストレージ・ファイル

画像、動画、添付ファイルの置き場。

「Vercelで完結」なら Vercel Blob、「コスト重視で配信が多い」なら Cloudflare R2。「既にSupabase」なら Supabase Storage、と素直に選ぶのが現実的です。 ただし Supabase Storage はオブジェクトの所有権がSupabaseの認証ユーザーに紐づくため、構成Bで認証をClerkにしている場合は auth.uid() ベースのStorageポリシーが効かない点に注意します(StorageのRLSもDBと同じく明示が必要)。

バックグラウンドジョブ・キュー

「時間がかかる処理」「定期実行」をどう扱うかは、Vercelだけでは厳しいので外部サービスとの併用になります。

「定期実行だけ」なら Vercel Cron Jobs。「本格的なワークフロー(失敗リトライ、ステップ実行、人手承認)」が要るなら Inngest か Trigger.dev。 ジョブキューの基本は ジョブキューとは？なぜバックグラウンド処理が必要なのか も合わせて読むと整理しやすいです。

全体像でみる定番組み合わせ

ここまでをまとめると、「Vercelで新規SaaSを立ち上げる場合の鉄板スタック」はこんな形になります。

「全部入れる必要はない」ですが、「どれが何の役割か」を把握しておくと、要件が出てきたときに迷いません。

選ぶときの注意点

新規構築の手順としては、つまずきと料金を踏まえると次の順で進めると事故が少ないです。

1. ベンダーロックインを意識する

Supabase の DB + 認証 + Storage を全部使うと、抜けるときにかなり重くなります(前章の構成Aの移行コスト)。 重要な部分は「DBはSupabase、認証はClerk、StorageはR2」のように カテゴリ別に分散 しておく方が、後の移行が楽です。ただし分散すると権限連携の手間とMAU課金が増えるトレードオフがある点も忘れずに。

2. 料金構造の違いを理解する

サーバーレス系は「使った分だけ」課金が多く、トラフィックが伸びると急に増えます。 特に Vercel関数実行 × LLMトークン × DB接続 × 認証MAU が掛け算で増えるパターンに注意。前章の概算のとおり、5万MAU規模で月$900前後、20万MAUで$4,000超に達することがあります。 Cloud全般の転送量は クラウド料金で転送量課金が増えるのはどこ？ も参考になります。

3. 全部「公式」でそろえなくていい

Vercel公式のVercel PostgresやVercel Blobは便利ですが、「コスト」「機能の深さ」ではサードパーティの方が強いことも普通にあります。 「Vercel公式 = 自動で最適解」ではなく、「カテゴリごとに実績ある技術を1個ずつ選ぶ」くらいの感覚でOKです。

4. AIで書かせるなら定番スタックの方が相性が良い

ChatGPTやClaudeにコードを書かせるとき、Next.js + Tailwind + shadcn/ui + Supabase のような 世間で流通している組み合わせ を使う方が、AI生成コードの精度が上がります。 マイナーな組み合わせを選ぶと、AIの提案も少なくなり、自分で書く量が増えます。

5. 個人開発なら無料枠で完結する

ここで挙げた多くのサービスは、個人開発レベルなら無料枠だけで動きます。 Vercel Hobby + Supabase Free(5万MAUまで認証無料)+ Clerk Free(1万MAUまで)+ Sentry Free + Resend Free で、本格的なSaaSのプロトタイプが0円で立ち上がります。 ただし前章のとおり、有料化の瞬間に複数サービスの基本料金が同時に発生する「課金の壁」があるので、収益化のタイミングと合わせて切り替えます。

まとめ

Vercelは強力ですが、それ単体では「フロント配信」までしかカバーしないので、用途別に外部サービスとの組み合わせが必要です。 各カテゴリで定番を1個ずつ覚えておくと、新規アプリの立ち上げが一気に速くなります。

迷ったらこの順番で試すのが無難です。

1. Next.js + Tailwind + shadcn/ui でUIを作る
2. Supabase でDBを立ち上げ、RLSポリシーを最初から明示する
3. 認証は 構成A(Supabase Auth)か構成B(Clerk連携) を、移行余地とMAU課金で選ぶ
4. Stripe + Resend で決済とメールを足す
5. Sentry + Vercel Analytics で運用とコストに備える
6. AI機能が要れば AI SDK + OpenAI/Anthropic を追加

「公式で揃えなきゃ」ではなく、「カテゴリ別に実績ある技術を選ぶ」のがVercelの自由度を活かす考え方です。 2026年時点では、ここで挙げた組み合わせが業界の事実上の標準になっており、AI に質問するときも、テンプレートを探すときも、これらを前提にすると答えが見つかりやすくなります。

Vercelと相性のいい技術に関するよくある質問

Q. 全部Vercel公式サービスで統一すべきですか？

A. 統一しなくてOKです。Vercel公式(Vercel Postgres、Blob、KV)は便利ですが、機能の深さや料金ではサードパーティ(Supabase、Cloudflare R2、Upstash)の方が強いケースも普通にあります。カテゴリごとに最適なものを1個ずつ、で問題ありません。

Q. Supabase全部入りとClerk分離、どっちで組むべき？

A. 最短で1つに完結させたいなら構成A(Supabase全部入り)。認証画面の完成度を最優先し、後で認証を剥がせる余地を残したいなら構成B(Clerk分離)です。構成Aは authスキーマ依存で移行が重く、構成Bはトークン連携の一手間とMAU従量課金が増える、というトレードオフがあります。

Q. ClerkとSupabaseをつないだのにデータが空で返ります。なぜ？

A. SupabaseクライアントにClerkのセッショントークンを渡しておらず、RLSポリシー内の auth.jwt() が null になっているのが定番原因です。2025年4月以降はSupabaseのThird-Party Auth(ネイティブ統合)が推奨で、RLSは (auth.jwt()->>'sub') = user_id のようにClerkの sub クレームで判定します。ネットワークタブで Authorization ヘッダが付いているか確認してください。

Q. ClerkとNextAuth.js(Auth.js)はどちらが良い？

A. 「数時間で完成度の高い認証画面」ならClerk(UIコンポーネント込み)、「OSSで無料 + 自由度重視」ならNextAuth.js。Clerkは1万MAUまで無料、Pro $25/月で、超過分は $0.02/MAU の従量です。規模が大きいとMAU課金が効いてくるので、コスト構造も含めて判断します。

Q. 結局、月いくらくらいかかりますか？

A. 個人開発なら無料枠で$0です。有料化すると Vercel Pro $20 + Supabase Pro $25 が基本で、1万MAUまでなら合計$45前後。5万MAUだとClerkが約$825加わり月$900前後、20万MAUでは$4,000超になることもあります。Clerkの $0.02/MAU が線形に伸びるのが主因です。

Q. AI SDKは Vercel 以外でも使えますか？

A. 使えます。AI SDKはnpmパッケージで、Next.js / Node.js が動く環境ならどこでも動作します。Vercelに縛られませんが、Vercelで動かすときに最も推奨設定で使えるという関係です。

Q. 鉄板スタック以外を選んだら詰みますか？

A. 詰みません。ただしAI生成コードの精度、公式ガイドの充実度、質問したときの回答数で「定番ほど早く進む」のは事実です。マイナースタックは自分で頑張る量が増える前提で選びます。

参考リンク

• Vercel: Templates
• Vercel: Pricing
• Vercel: AI SDK
• Supabase: Pricing
• Supabase: Third-Party Auth: Clerk
• Clerk: Pricing
• Clerk: Integrate Supabase with Clerk
• Stripe: Documentation
• Sentry: Documentation
• Resend: Documentation
• shadcn/ui: Documentation