追記
開発用サーバーを立ち上げ
コマンドラインから
npm run dev
をやって
http://localhost:3000
にアクセス
本番用サーバーにデプロイ
vercel --prod
をやって
https://angra.vercel.app/
二アクセス
【2025年版】Google Antigravity × Next.js × Supabaseで爆速マッチングアプリ開発
はじめに
従来の「VPS借りて、SSHして…」というインフラ構築はもう卒業。
最新のAI IDE 「Google Antigravity」 と、Vercel社が開発する Next.js、そして Supabase を組み合わせることで、世界標準のモダンなマッチングアプリを爆速で立ち上げる手順です。
1. 技術スタックの選定
個人開発からスタートアップまで、Vercelでアプリを公開するならこの構成が「王道（デファクトスタンダード）」です。
| 役割 | 技術 | 選定理由 |
|---|---|---|
| Frontend | Next.js (App Router) | Vercel公式フレームワーク。サーバー機能(API)との統合が強力。 |
| Deploy | Vercel | Next.jsの開発元。GitHub連携で自動デプロイ、設定ゼロでCDN化。 |
| Backend | Supabase | 認証、DB、画像保存、リアルタイムチャット機能が全部入り。 |
| Styling | Tailwind CSS | AIによるコード生成精度が最も高く、デザイン調整が容易。 |
通常、Redis は以下の用途で使われますが、Supabaseがこれらを代用します。用途普通の構成 (Redisが必要)今回の構成 (Supabase)チャット (リアルタイム通信)Redis Pub/Sub を使ってメッセージを配信するSupabase Realtime が標準装備。DBに保存するだけで相手に即座に届く。ログイン維持 (セッション)RedisにセッションIDを保存するSupabase Auth がJWT（トークン）で管理するため、サーバー保存が不要。データの一時保存 (キャッシュ)表示を速くするためにRedisに置くVercel Data Cache が強力なので、Next.js側で勝手にキャッシュしてくれる。
なぜ Vue 3 ではなく Next.js (React) なのか？
- Vercelとの親和性: Next.jsの新機能はVercelで最優先にサポートされる。
- AIの精度: Reactのエコシステムは世界最大のため、AIの学習データが豊富で、生成されるコードの品質が高い。
- コンポーネント: マッチングアプリ向けのリッチなUIライブラリが豊富。
2. Google Antigravity の推奨設定
AIエージェントに自律的に動いてもらうため、以下の設定を変更します。
-
Review Policy:
Agent Decides- AIの判断で作業を進めさせる（スピード重視）。
-
Terminal Command:
Auto-
npm installなどの依存関係インストールを自動化。
-
-
Browser JS Execution:
Model Decides- AIがブラウザを開いて、ログインや投稿の動作テストを行えるようにする。
-
Clipboard Context:
On- 外部ドキュメントなどをコピペした際、AIが即座に文脈を理解できるようにする。
3. プロジェクト作成プロンプト
エディタのチャット欄（Cmd+K）に以下のプロンプトを入力するだけで、環境構築から実装計画までAIが実行します。
Next.js (App Router) とVercelを使用して、モバイルファーストのマッチングアプリの新規プロジェクトを作成してください。
## 技術スタック
* Framework: Next.js 15 (App Router), React
* Styling: Tailwind CSS (モダンでシンプルなデザイン)
* Backend/DB: Supabase (Auth, Database, Storage, Realtime)
* Deployment: Vercel
## 実装したい機能の骨組み
1. Authentication: Supabase Authを使用したメールアドレス登録・ログイン画面。
2. Profile: ユーザー情報（名前、年齢、自己紹介）とプロフィール画像（Supabase Storage）の登録・編集機能。
3. Discovery: ユーザー一覧をカード形式で表示する画面（将来的にスワイプUIにする予定）。
4. Infrastructure: 必要な環境変数(.env.local.example)や設定ファイルを含めること。
まずは、プロジェクトのフォルダ構成と、各機能の実装計画（Artifact）を提示してください。
4. インフラとコストの考え方
この構成は 「小さく始めて、大きく育てる」 のに最適です。
- パフォーマンス: Vercelのエッジネットワークにより、世界中どこからでも高速にアクセス可能（Cloudflare不要）。
-
コスト:
- 開発フェーズ: Vercel (Hobby) $0 + Supabase (Free) $0 = 完全無料
- リリース後: Vercel (Pro) $20 + Supabase (Pro) $25 = 月額 約7,000円〜
- 従量課金で大規模アクセス（バズり）にも自動対応。
まとめ
Google Antigravityの「Agent-First」な開発スタイルにおいて、Next.js (React) はAIが最も得意とする領域です。
インフラ管理をVercelとSupabaseに任せることで、開発者は「どんな出会い体験を作るか」という本質的な価値づくりに集中できます。
独自ドメインも設定可能で
httpsも勝手にやってくれるらしい
とりあえず、デプロイできました
https://angra.vercel.app/
elementplus的なので
https://ui.shadcn.com/
も入れた