株式会社CAENのロゴ

AI駆動開発の技術スタック最適解｜Next.js × Supabase × Vercelの三種の神器

この記事で分かること

  • AI 駆動開発で Web サービスを作るときの「迷わない」技術スタック
  • なぜ Next.js なのか、Vue.js から乗り換えた理由
  • Supabase をデータベース・認証・ストレージの共通基盤にする理由
  • Vercel が個人開発〜スモールビジネスで一択になる理由
  • Resend / Tailwind CSS / shadcn/ui など周辺の選び方

結論、AI 駆動開発初心者〜中級者に僕（大森翔吾）が薦めるのは Next.js × Supabase × Vercel の三種の神器 です。ちなみにこの CAENコーポレートサイト 自身がこの構成で動いています。

技術選定の基本方針：AI の学習量で選ぶ

2026年の AI 駆動開発で技術を選ぶ基準は、自分の慣れよりも AI がその技術をどれだけ知っているか のほうが重要です。

理由はシンプルです。

  • 使う人が多い → Web にコードが多い → AI がよく学習している → いいコードを書ける
  • 使う人が少ない → Web にコードが少ない → AI が学習していない → 変なコードが混ざる

デファクトスタンダードに張る のが AI 駆動開発の鉄則になりました。

1. プログラミング言語：Next.js 一択

僕はもともと Vue.js / Nuxt.js 派でした。Web 制作を6〜7年やってきた中で、慣れもあり、十分書けていました。

それでも2024年末、AI 駆動開発に本腰を入れる際に Next.js に乗り換えました。理由は一つ。

AI 駆動開発ツール v0 を作る Vercel が、Next.js を作っている会社だから。

つまり「AI が一番賢く書けるフレームワーク」が Next.js なのです。

Next.js が強い理由

  1. React ベース：最大派閥。AI の学習量が圧倒的
  2. フロント・バックを同居：別言語を覚えなくていい
  3. Vercel と深い統合：デプロイが最短手順
  4. 型安全（TypeScript 前提）：AI が書き散らしてもブレにくい

自然言語から AI にアプリを作らせるときも、何も指定しなければ大抵 React / Next.js で返ってきます。迷ったら Next.js でいいです。

2. デプロイ：Vercel 一択

Next.js で書いた Web サービスをインターネットに公開するのは Vercel がベストです。

  • GitHub 連携 → ボタン5回で公開
  • 無料枠が個人開発範囲をカバー
  • Next.js との相性が最高（同じ会社）
  • AI 駆動開発との親和性が高く、プレビュー URL で AI レビューしやすい

エンタープライズ規模では AWS / Cloudflare Workers など別の選択肢もありますが、個人開発〜中小規模なら Vercel で十分です。

3. データベース＋認証＋ストレージ：Supabase

Web サービスには「データを保存する場所（DB）」「ログイン機能（Auth）」「画像などの置き場（Storage）」が必要です。これらを Supabase がワンストップで提供してくれます。

Supabase を推す理由

  • ダッシュボードが新しくて見やすい：初心者が迷わない
  • 無料枠が広い：1プロジェクト2つまで＋1週間アクセスで休眠の制約はあるが、開発段階は十分
  • PostgreSQL ベース：成熟した SQL と互換
  • Supabase MCP：AI が直接 Supabase を操作できる（AI 駆動開発と相性抜群）

覚えるサービスを1個に絞る意味

AI 駆動開発で初心者が失敗しやすいのは、DB は A、Auth は B、Storage は C……と分散させて混乱する パターンです。

Supabase に寄せておけば、覚えるのは Supabase だけ。AI への指示も「Supabase でこれを実装」で通ります。

三種の神器まとめ

レイヤー採用ひとこと
言語・フレームワークNext.jsAI の学習量と Vercel 連携で一択
データベース・認証SupabaseDB/Auth/Storage/MCP をワンストップ
ホスティングVercel最短デプロイ、無料枠十分

これが2026年の AI 駆動開発における「三種の神器」です。

余談①：メール送信は Resend

アカウント登録の確認メール、パスワードリセットなど、メール送信基盤には Resend を選ぶといいです。

  • 海外主流サービス（英語情報が豊富 → AI が強い）
  • ダッシュボードがモダン
  • 無料枠が広い
  • Next.js / React と統合しやすい

国内メール送信サービスも選択肢に挙がりますが、AI 駆動開発では「英語情報の量 ＝ AI の賢さ」なので、Resend 推奨です。

余談②：スタイリングは Tailwind CSS + shadcn/ui

デザインの当て方（スタイリング）は、CSS か Tailwind CSS かで好みが分かれますが、AI 駆動開発では Tailwind CSS が圧勝です。

  • 設計図（コンポーネント）内に直接スタイルが書ける → AI が一望できる
  • shadcn/ui という高品質コンポーネント集が Tailwind ベース
  • AI がほぼ100%これを使って書く

6〜7年 CSS に慣れた僕でも、1プロジェクトで Tailwind に完全移行しました。それくらい便利でした。

将来の選定判断を楽にするコツ

技術選定の一番のコストは「選び直す」ときに発生します。今から始める方は以下を意識すると後悔が減ります。

  1. AI が一番よく知っている技術を選ぶ
  2. 無料枠がある技術を選ぶ
  3. 使うサービス数を最小化する
  4. 1〜2年ごとに見直す前提で選ぶ

AI 駆動開発のベストプラクティスは短命です。「一生もの」を目指さず、「今の最適解」に張ってください。

関連する記事

AI駆動開発のご相談・お仕事のご依頼

株式会社CAEN（代表：大森翔吾）では、技術選定のセカンドオピニオン、AI 駆動開発前提の新規プロダクト立ち上げ伴走、Next.js / Supabase / Vercel を中心とした構成支援を承ります。

「自社の新規プロダクトの技術スタックを相談したい」「AI 駆動開発前提でチームを編成したい」など、お気軽にご連絡ください。