先に要点
- Vercel はフロントエンド配信に特化しているので、`DB` `認証` `決済` `通知` などは外部サービスと組み合わせるのが基本構成です。
- 定番の組み合わせは `Next.js + Supabase + Clerk + Tailwind + Stripe + Resend + Sentry` あたりで、スタートアップの初期構成として鉄板です。
- AI機能を含めるなら `AI SDK + OpenAI/Anthropic + v0` の追加で、`Vercelエコシステム` がほぼ完結します。
- `全部Vercel公式` でそろえる必要はなく、`各カテゴリで実績ある技術を1個ずつ選ぶ` 方が運用しやすいです。
Vercelで何か作るとき、相性が良い技術ってあるの？ 周辺サービスを選ぶときに何を基準にすればいい？
Vercel単体ではフロントエンド配信と軽い関数実行までしかカバーしないので、DB、認証、決済、通知、モニタリング などは外部サービスとの組み合わせが前提になります。
ただ、選択肢が多すぎて初見では迷いやすいので、まずはこの組み合わせから の鉄板スタックを知っておくと立ち上がりが早くなります。
この記事では、2026年5月時点の各サービス公式ドキュメントを確認しながら、Vercelと組み合わせやすい技術を 用途カテゴリ別に網羅 します。 Vercel そのものは Vercelとは？何ができる？Next.jsとの相性・向いている案件・注意点を解説、用語の整理は 初心者が知っておくべきVercelの基礎用語まとめ もあわせて読むと立ち位置が見えやすいです。
この記事は2026年5月時点の情報をもとに書いています。各サービスは料金・機能が変わりやすいので、本番採用前は公式ドキュメントの最新情報も合わせて確認してください。
まず結論：定番スタックの全体像
Vercelで新規アプリを立ち上げるなら、まずこれを試す という鉄板構成があります。
それぞれのカテゴリで なぜそれが選ばれるか を順に見ていきます。
フレームワーク
Vercelの土台となる選択。どのフレームワークで書くか で他のすべての判断が変わります。
| フレームワーク | Vercelとの相性 | 向く用途 |
|---|---|---|
| Next.js | ◎ 開発元、最新機能対応最速 | SaaS、メディア、AIアプリ全般 |
| Nuxt | ○ 公式アダプタあり | Vue派、企業サイト |
| SvelteKit | ○ 公式アダプタあり | 小〜中規模、軽量重視 |
| Astro | ○ 公式アダプタあり | コンテンツサイト、ブログ、ドキュメント |
| Remix | ○ 公式アダプタあり | 業務アプリ寄り、Web標準重視 |
| Vite + React | △ ビルド出力の静的配信中心 | SPA、軽量プロト |
特にこだわりがなければ Next.js が無難。Vercelの全機能(Image Optimization、ISR、Edge Functions、AI SDK連携)を最大限使えます。 他フレームワークの違いは Next.jsは他のフレームワークと何が違う？、Astroは Astroとは？何が特徴のWebフレームワークなのか初心者向けに整理 もあわせて読むと選びやすいです。
データベース
VercelはDB本体を持たない設計なので、ここの選択がアプリの性格を左右します。
| サービス | 特徴 | 向く用途 |
|---|---|---|
| Supabase | PostgreSQL + 認証 + Storage + Realtime統合 | スタートアップ、SaaS、フルスタック |
| Neon | サーバーレスPostgreSQL、ブランチDB | 開発スピード重視、PR毎にDB分離 |
| PlanetScale | サーバーレスMySQL、スケール強い | MySQLが必要、大規模化を見越す |
| Vercel Postgres | Vercel公式PostgreSQL(裏はNeon) | Vercel完結したい、シンプル構成 |
| Turso | エッジSQLite(libSQL) | グローバル分散、軽量データ |
| Upstash Redis | サーバーレスRedis | キャッシュ、レート制限、セッション |
| MongoDB Atlas | NoSQL定番、ドキュメント型 | スキーマ柔軟、Node.js中心 |
迷ったら Supabase が最も無難。DB + 認証 + Storage がワンストップで、Vercelとの接続例も豊富。
本格スケールが見えているなら Neon か PlanetScale。Redisはキャッシュ用途で Upstash がほぼ一択(サーバーレス課金で安価)。
認証
ログイン機能 を自前実装すると詰まりやすいので、認証はSaaS利用が定番。
| サービス | 特徴 | 向く用途 |
|---|---|---|
| Clerk | UIコンポーネント込み、Next.js統合最強 | 短期で完成度の高い認証画面 |
| NextAuth.js (Auth.js) | OSS、自由度高い、無料 | カスタマイズ重視、自前管理 |
| Supabase Auth | Supabase DBとセット | Supabase採用済みなら自然な選択 |
| Auth0 | 老舗、エンタープライズ実績 | 法人向け、SSO、コンプライアンス重視 |
| Firebase Auth | Google系、モバイルにも強い | 既存Firebaseがある場合 |
| Lucia | OSS軽量ライブラリ | 自前実装に近い、依存最小化 |
数時間で本格認証画面まで欲しい なら Clerk。OSS + 自由度 重視なら NextAuth.js(Auth.js)。
Supabase を採用するなら Supabase Auth がそのまま使えてシンプルです。
認証の基礎は Q&A形式: 認証(AuthN)と認可(AuthZ)を一言で言うと？ も参考になります。
AI・LLM連携
Vercelが特に力を入れている領域。AI機能を含むアプリならこの組み合わせがほぼ標準。
| ツール | 役割 | 向く用途 |
|---|---|---|
| AI SDK (Vercel公式) | LLM接続の統一インターフェース | OpenAI/Anthropic/Geminiを簡単切替 |
| OpenAI API | GPT系モデル、Whisper、Embeddings | 汎用LLM、音声、ベクトル検索 |
| Anthropic API | Claude系モデル | 長文理解、コーディング、安全性重視 |
| Google Gemini API | Gemini系モデル | マルチモーダル、画像/動画解析 |
| v0.app | 自然言語からUIコード生成 | プロトタイプ、デザイン補助 |
| LangChain.js | 複雑なAIワークフロー構築 | RAG、Agent、複数LLM連携 |
| Vercel AI Gateway | LLMリクエストの統合管理 | 複数モデル切替、コスト監視 |
最初に触るなら AI SDK + OpenAI または Anthropic の2点セット。これだけで ChatGPT風UI が短時間で組めます。
複数モデルを切り替えながら使うなら、AI Gateway や AI SDK のプロバイダ抽象化が便利。
AI APIの料金感は AI APIの料金はどう見る？トークン課金・モデル差・コスト設計の基本、コスト削減は AIツールのトークン使用量を減らすコツ も参考になります。
CMS・コンテンツ管理
ブログ、メディア、コーポレートサイトでの選択。
| サービス | 特徴 | 向く用途 |
|---|---|---|
| Sanity | 構造化データ、リアルタイム編集 | 編集体験重視、複雑なコンテンツ |
| Contentful | 大手SaaS、エンタープライズ実績 | 大規模メディア、多言語サイト |
| MicroCMS | 国産、日本語UI、価格安い | 国内向けサイト、小〜中規模 |
| Strapi | OSS、自前ホスト可 | カスタマイズ重視、データ持ち出したい |
| Notion API | Notion本体をCMSとして使う | チームがNotionに慣れている |
| MDX (リポジトリ内Markdown) | Gitで管理、エンジニア向け | 個人ブログ、技術ドキュメント |
| Payload CMS | OSS、Node.js製、TypeScript | フルスタック、型安全重視 |
日本国内で運用 なら MicroCMS が分かりやすい。本格メディア なら Sanity か Contentful。
個人ブログや技術ドキュメントなら、リポジトリ内 MDX(Markdown + JSX)の方がシンプルなことが多いです。
スタイリング・UI
見た目 を作る部分。Vercel前提なら ほぼ決まった鉄板組み合わせがあります。
| ツール | 役割 |
|---|---|
| Tailwind CSS | ユーティリティクラスCSS、デファクト |
| shadcn/ui | Tailwind+Radix UIベースのコンポーネント集 |
| Radix UI | アクセシブルなヘッドレスコンポーネント |
| Headless UI | Tailwind公式のヘッドレスコンポーネント |
| Framer Motion | アニメーション |
| Lucide / Heroicons | アイコンセット |
| next/font | フォント最適化(Next.js組み込み) |
2026年現在の標準は Tailwind CSS + shadcn/ui。ほぼセットで導入されます。
v0で生成されるUIもこの組み合わせを前提にしているので、AI生成 → そのまま採用 がスムーズです。
決済
サブスク、買い切り、マーケットプレイス、いずれも事実上 Stripe一強。
| サービス | 特徴 | 向く用途 |
|---|---|---|
| Stripe | 世界標準、Next.js連携豊富 | サブスク、買い切り、マーケットプレイス |
| Lemon Squeezy | Stripe代替、税務代行(MoR) | 海外販売、税処理を任せたい |
| Paddle | Stripe代替、税務代行(MoR) | SaaS、海外サブスク |
| KOMOJU | 国内決済(コンビニ、銀行振込) | 日本国内向けに特化 |
| Square | 実店舗+オンライン統合 | 飲食、小売連携 |
特にこだわりがなければ Stripe。Next.js + Stripe のサンプルが Vercel公式ガイドにも多数あります。 日本の消費税やインボイス制度を業者に任せたいなら Lemon Squeezy や Paddle のようなMoR(Merchant of Record)型サービスが楽になります。
メール送信
Vercel の Function からメール送信するなら、専用サービスを使うのが安全。
| サービス | 特徴 | 向く用途 |
|---|---|---|
| Resend | 開発者体験重視、新興 | スタートアップ、Next.js連携 |
| SendGrid | 老舗、大量配信実績 | 大規模、エンタープライズ |
| Postmark | 取引メール特化、到達率高い | 認証メール、通知メール |
| Amazon SES | 安価、AWS統合 | 大量配信、コスト重視 |
| Mailgun | 開発者向け、API充実 | プログラマティックな送信 |
| React Email | メールテンプレートをReactで書ける | 開発者向け、Resendと相性◎ |
新規なら Resend + React Email がほぼ標準セット。Next.jsとの相性が良く、Vercelのテンプレートにも採用されています。 メール基盤の判断は VPSからのメール送信は Resend / Brevo / レンタルサーバーSMTP のどれが現実的？ もあわせて読むと整理しやすいです。
モニタリング・観測性
本番運用ではほぼ必須のカテゴリ。
| サービス | 特徴 | 向く用途 |
|---|---|---|
| Sentry | エラー監視デファクト、Next.js統合済み | エラー追跡、パフォーマンス計測 |
| Vercel Analytics | Vercel公式、簡単、プライバシー配慮 | アクセス解析、ページ人気 |
| Vercel Speed Insights | Core Web Vitals計測 | 表示速度改善 |
| Better Stack | ログ + Uptime監視統合 | 死活監視+ログ集約 |
| Datadog | 大規模統合監視 | エンタープライズ |
| PostHog | プロダクトアナリティクス、A/B | 行動分析、機能改善 |
| LogRocket | セッションリプレイ | UX問題調査 |
最低限揃えるなら Sentry + Vercel Analytics の2点セット。これで エラー検知 + アクセス解析 がカバーできます。
本格運用に入ったら PostHog や LogRocket でユーザー行動の深掘りも検討範囲に入ります。
ストレージ・ファイル
画像、動画、添付ファイルの置き場。
| サービス | 特徴 | 向く用途 |
|---|---|---|
| Vercel Blob | Vercel公式、シンプル | Vercel完結したい場合 |
| Cloudflare R2 | egress無料、安価 | 大量配信、コスト重視 |
| AWS S3 | 業界標準、機能豊富 | 既存AWSがある、本格運用 |
| Supabase Storage | DB+認証とセット | Supabase採用済みなら自然 |
| UploadThing | アップロード体験特化 | フォーム経由のファイル管理 |
| Cloudinary | 画像/動画変換特化 | メディアサイト、画像最適化 |
Vercelで完結 なら Vercel Blob、コスト重視で配信が多い なら Cloudflare R2。既にSupabase なら Supabase Storage、と素直に選ぶのが現実的です。
バックグラウンドジョブ・キュー
時間がかかる処理 定期実行 をどう扱うかは、Vercelだけでは厳しいので外部サービスとの併用になります。
| サービス | 特徴 | 向く用途 |
|---|---|---|
| Inngest | サーバーレスジョブ・ワークフロー | 非同期処理、リトライ、ステップ関数 |
| Trigger.dev | OSSジョブランナー、TypeScript中心 | 開発者体験重視、複雑ワークフロー |
| QStash (Upstash) | サーバーレスメッセージキュー | シンプルなジョブ予約、リトライ |
| Vercel Cron Jobs | Vercel公式、定期実行 | 簡単な定時タスク |
| Mergent | サーバーレスジョブ、シンプル | 軽量なジョブ予約 |
定期実行だけ なら Vercel Cron Jobs。本格的なワークフロー(失敗リトライ、ステップ実行、人手承認) が要るなら Inngest か Trigger.dev。
ジョブキューの基本は ジョブキューとは？なぜバックグラウンド処理が必要なのか も合わせて読むと整理しやすいです。
全体像でみる定番組み合わせ
ここまでをまとめると、Vercelで新規SaaSを立ち上げる場合の鉄板スタック はこんな形になります。
| 領域 | 鉄板候補 |
|---|---|
| フレームワーク | Next.js |
| スタイル | Tailwind CSS + shadcn/ui |
| DB | Supabase or Neon |
| 認証 | Clerk or Supabase Auth |
| 決済 | Stripe |
| メール | Resend + React Email |
| モニタリング | Sentry + Vercel Analytics |
| ストレージ | Vercel Blob or Cloudflare R2 |
| AI | AI SDK + OpenAI/Anthropic |
| ジョブ | Vercel Cron Jobs(軽量) or Inngest(本格) |
全部入れる必要はない ですが、どれが何の役割か を把握しておくと、要件が出てきたときに迷いません。
選ぶときの注意点
1. ベンダーロックインを意識する
Supabase の DB + 認証 + Storage を全部使うと、抜けるときにかなり重くなります。
重要な部分は DB は Supabase、認証は Clerk、Storage は R2 のように カテゴリ別に分散 しておく方が、後の移行が楽です。
2. 料金構造の違いを理解する
サーバーレス系は 使った分だけ 課金が多く、トラフィックが伸びると急に増えます。
特に Vercel Function 実行回数 × LLMトークン × DB接続数 が掛け算で増えるパターンに注意。
帯域コストの考え方は 帯域コストとは？クラウドで意外と見落とされる料金、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 + Clerk Free + Sentry Free + Resend Free で、本格的なSaaSのプロトタイプが0円で立ち上がります。
収益化が見えてから有料に切り替える の順で問題ありません。
まとめ
Vercelは強力ですが、それ単体では フロント配信 までしかカバーしないので、用途別に外部サービスとの組み合わせが必要です。
各カテゴリで定番を1個ずつ覚えておくと、新規アプリの立ち上げが一気に速くなります。
迷ったらこの順番で試すのが無難です。
- Next.js + Tailwind + shadcn/ui でUIを作る
- Supabase でDB+認証を立ち上げる
- Stripe + Resend で決済とメールを足す
- Sentry + Vercel Analytics で運用に備える
- 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 と Neon、どちらを選ぶべき？
A. DB + 認証 + Storage を1つで揃えたい なら Supabase、DBに集中したい + ブランチDB機能が欲しい なら Neon。スタートアップの初期は Supabase 一択になりがち、本格スケール見越すと Neon も選択肢です。
Q. Clerk と NextAuth.js(Auth.js)はどちらが良い？
A. 数時間で完成度の高い認証画面 なら Clerk(UIコンポーネント込み)、OSSで無料 + 自由度重視 なら NextAuth.js。Clerk は月額課金あり($25/月〜)ですが、開発時短効果は大きいです。
Q. shadcn/ui は本当に標準ですか？
A. 2025年以降、急速に標準化されました。Vercelのテンプレート、v0の出力、Cursor / Claude Code の生成コードでも、ほぼ shadcn/ui ベースが前提になっています。Tailwind を使うなら採用しない理由が薄いです。
Q. AI SDKは Vercel 以外でも使えますか？
A. 使えます。AI SDKはnpmパッケージで、Next.js / Node.js が動く環境ならどこでも動作します。Vercelに縛られませんが、Vercelで動かすときに最も推奨設定で使えるという関係です。
Q. 個人開発で全部無料で動かせますか？
A. 大半は可能です。Vercel Hobby + Supabase Free + Clerk Free + Sentry Free + Resend Free + GitHub Free で、本格的なSaaSのプロトタイプが$0で動きます。商用化のタイミングで段階的に有料化するのが現実的です。
Q. 鉄板スタック以外を選んだら詰みますか？
A. 詰みません。ただし、AI生成コードの精度、公式ガイドの充実度、質問したときの回答数、で 定番ほど早く進む のは事実です。マイナースタックは 自分で頑張る 量が増える前提で選びます。
参考リンク
- Vercel: Templates
- Vercel: AI SDK
- Vercel: Storage
- Supabase: Documentation
- Clerk: Documentation
- Stripe: Documentation
- Sentry: Documentation
- Resend: Documentation
- shadcn/ui: Documentation