月額0円から作るSaaSテンプレート
- Digital3,480 JPY
Next.js + Clerk + Stripe + Supabase の土台を丸ごとセット。認証・決済・DBをゼロから構築する手間を省いて、アイデアの実装に集中できます。
認証・決済・DBをまとめて解決する Next.js SaaS スターターキット
SaaSを作るたびに繰り返す「認証の実装」「Stripe連携」「DB設計」をスキップして、プロダクト本体の開発だけに集中できます。サインアップから決済・プラン管理まで、エンドツーエンドで動作確認済みの状態でスタートできます。
◆できること
- Clerk でメール / Google サインイン・ユーザー管理 - Stripe でサブスク決済（Checkout・Customer Portal・Webhook同期） - Supabase で PostgreSQL データベース・ユーザーテーブル自動生成 - プラン管理（無料 / Pro / Business）と機能ゲート（canUse() 1行で制御） - 使用量メーター（月次APIコール上限の自動カウント） - Vercel デプロイ対応
◆ 含まれるページ
トップ（LP） 料金プラン サインイン / サインアップ ダッシュボード 設定・プラン管理 利用規約 / プライバシーポリシー
◆ 付属ドキュメント（4本）
購入後に迷わないよう、詳細なガイドが付属しています。 - TUTORIAL.md — Todo管理SaaSを題材に「設定→DB追加→画面作成→デプロイ」を1時間で体験する通し例 - CUSTOMIZE.md — ブランド変更・プラン設定・デプロイまでの手順 - FEATURE-GATING.md — プランによる機能の出し分けパターン（オン/オフ・回数制限・APIガード） - DATABASE.md — DB設定・テーブル追加・RLSの扱い
◆ 技術スタック
- 言語: TypeScript - FW: Next.js 14（App Router） - UI: Tailwind CSS + shadcn/ui - 認証: Clerk - 決済: Stripe - DB: Supabase（PostgreSQL）
◆利用する外部サービス（3つ）
- Clerk — 認証（サインイン・サインアップ・ユーザー管理） - Stripe — サブスク課金（決済・プラン切り替え・Webhook） - Supabase — データベース（PostgreSQL） 開発中は全サービスの無料枠で完結します。本番公開時に利用量に応じた料金が発生する場合があります。
◆想定される活用例
- AIツール（文章生成・画像生成・要約など）の有料サービス化 - 月額制のタスク管理・分析ツール - ユーザーごとにデータを持つ任意のWebサービス
◆ 購入後の流れ
1. ファイルをダウンロード・解凍 2. npm install で依存関係をインストール 3. 各サービスのAPIキーを .env.local に設定 4. npm run dev で起動 付属の TUTORIAL.md に沿って進めると、1時間程度で自分のSaaSとして動く状態になります。
◆注意事項
- 利用対象: Next.js の基礎知識がある方（App Router / TypeScript の読み書きができる程度） - Clerk / Stripe / Supabase のアカウントが別途必要（いずれも無料登録可） - ライセンス: 購入者本人のプロジェクトへの利用を許諾します（テンプレートそのものの再配布・再販は不可）
◆サポートについて
テンプレートのセットアップや動作に関するご質問はBOOTHのメッセージ機能にてお気軽にご相談ください。 ※ 本テンプレートは認証・決済・DBの土台部分のみを提供しています。 それ以上の機能設計・実装に関するご相談はサポート範囲外となります。 ※ Clerk・Stripe・Supabase 各サービス固有のエラーやアカウント・課金に関するお問い合わせは各サービスの公式サポートをご利用ください。