Loading...
この記事は、ひとりで作るSaaS - 設計・実装・運用の記録 Advent Calendar 2025 の3日目の記事です。
昨日の記事では「AI駆動開発のための技術選定」について書きました。この記事では、Next.js + Supabase + Vercelを使ったプロジェクトの全体像について解説します。
私が個人開発しているMemoreruでは、Next.js + Supabase + Vercelという構成を採用しています。この組み合わせは個人開発でよく選ばれる構成の1つです。データベースはNeon、ホスティングはCloudflareなど他の選択肢もあります。機能やプランを比較して、自分に合ったものを選ぶのがおすすめです。
自分が働いていた以前の会社では、プロダクトのリリース時にこんな作業をしていました。
Vercelでは、GitHubにpushするだけでこれらが自動化されます。PRを作ればプレビュー環境が自動生成され、mainにマージすれば本番にデプロイされる。手動での切り替え作業が不要になりました。
| 従来 | 現在 |
|---|---|
| ローカルにPostgreSQLインストール | Supabaseでクラウド上にDB作成 |
| 手動ビルド・アップロード・切り替え | GitHubにpushで自動デプロイ |
| SSL証明書の管理 | Vercelが自動で設定・更新 |
Next.jsは、フルスタックなフレームワークで、フロントエンドとバックエンドを1つのプロジェクトで扱えます。個人開発では、コードベースを分けずに済むのは大きなメリットです。
Supabaseは、PostgreSQLをホスティングしてくれるBaaS（Backend as a Service）です。管理画面からテーブル作成やデータ確認ができ、ローカルに環境構築する必要がありません。
Vercelは、Next.jsの開発元が提供するホスティングサービスです。GitHubにpushするだけで自動デプロイされ、プレビュー環境も自動生成されます。
Memoreruでは、Supabaseを純粋なPostgreSQLホスティングとして使っています。
Supabaseを選んだ理由は以下の通りです。
自分の場合は、使い慣れたpgAdminで接続したり、Supabase MCPを使ってClaude CodeからDBの操作やスキーマ確認をしています。
SupabaseにはAuthやStorageの機能もありますが、Memoreruでは認証にBetter Auth、ファイルストレージにCloudflare R2を使っているため、純粋なデータベースとしてのみ活用しています。
スキーマ設計の詳細については、12/6の「Supabaseでスキーマ設計：テーブル分割と正規化の実践」で解説します。
データベースへのアクセスにはDrizzle ORMを使っています。SQLライクな構文でクエリが書けます。
// Drizzle ORMでのクエリ
const result = await db
.select()
.from(contents)
.where(eq(contents.userId, userId))
.orderBy(desc(contents.createdAt))
.limit(10);Drizzle ORMについては、過去記事「Drizzle ORM × Claude Code：次世代のTypeScript開発体験」も参考にしてください。
GitHubリポジトリと連携するだけで、以下が自動化されます。
個人開発では、CI/CDの設定に時間をかけたくありません。Vercelなら、ほぼ設定不要でこれらが実現できます。
Vercelのダッシュボードで、プレビュー環境と本番環境で異なる環境変数を設定できます。
秘匿情報をGitにコミットせずに管理でき、環境ごとの切り替えも自動で行われます。
いろいろな考え方がありますが、Memoreruではソースコードの構成を大きく5つの領域に分けています。
src/
├── app/ # Next.js App Router（ルーティング）
├── client/ # クライアント専用コード
├── server/ # サーバー専用コード
├── shared/ # クライアント・サーバー共通
├── database/ # DBスキーマ定義
└── ...
この分離により、クライアントバンドルにサーバーコードが混入するのを防いでいます。
詳細なディレクトリ設計については、12/10の「App Routerのディレクトリ設計：Next.jsプロジェクトの構成術」で解説します。
Next.js + Supabase + Vercelは、個人開発でよく選ばれる構成です。
この構成で、インフラ管理の手間を最小限に抑えつつ、プロダクト開発に集中することができます。
明日は「個人開発のドキュメント戦略：設計書・思考ログの使い分け」について解説します。
シリーズの他の記事
Comments