Next.js + Supabase 個人開発入門2026 — 無料枠だけでSaaSを作る方法

なぜNext.js + Supabaseなのか

個人開発でSaaSやWebアプリを作るなら、Next.js + Supabaseが2026年時点で最もコスパの良い選択肢です。

• Next.js: Vercelの無料枠でデプロイ可能
• Supabase: 認証・DB・ストレージが無料枠で使える
• 組み合わせコスト: 月¥0〜¥5,000で本格的なSaaSが運営可能

この記事でわかること:

• Next.js + Supabaseの始め方
• 認証・DB設計の基本パターン
• Vercelデプロイまでの流れ
• 無料枠の制限と注意点

技術構成の全体像

ユーザー → Vercel（Next.js）→ Supabase（Auth/DB/Storage）
                            → Stripe（決済 ※必要な場合）

役割	技術	無料枠
フロントエンド + API	Next.js (Vercel)	月100GB帯域
認証	Supabase Auth	50,000 MAU
データベース	Supabase PostgreSQL	500MB
ストレージ	Supabase Storage	1GB
決済	Stripe	従量課金のみ

ステップ1：プロジェクトセットアップ

Next.jsプロジェクト作成

npx create-next-app@latest my-saas --typescript --tailwind --app
cd my-saas

Supabaseプロジェクト作成

1. supabase.com でアカウント作成
2. 「New Project」でプロジェクト作成
3. Settings → API から接続情報を取得

環境変数設定

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...  # サーバーサイドのみ

重要： .env.local は .gitignore に含まれていることを必ず確認してください。

ステップ2：認証の実装

Supabase Authを使えば、メール認証・Google認証・GitHub認証などがすぐに実装できます。

Supabaseクライアントの作成

// lib/supabase/client.ts（ブラウザ用）
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

// lib/supabase/server.ts（サーバー用）
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() { return cookieStore.getAll() },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          )
        },
      },
    }
  )
}

ログインページの例

// app/login/page.tsx
'use client'
import { createClient } from '@/lib/supabase/client'

export default function LoginPage() {
  const supabase = createClient()

  const handleLogin = async () => {
    await supabase.auth.signInWithOAuth({
      provider: 'github',
      options: { redirectTo: `${location.origin}/auth/callback` }
    })
  }

  return (
    <button onClick={handleLogin}>
      GitHubでログイン
    </button>
  )
}

ステップ3：データベース設計

基本的なテーブル構成

個人開発SaaSで最低限必要なテーブルは以下の3つです。

-- ユーザープロフィール
create table profiles (
  id uuid references auth.users primary key,
  display_name text,
  created_at timestamptz default now()
);

-- プロダクト/プラン
create table products (
  id uuid primary key default gen_random_uuid(),
  name text not null,
  price integer not null,
  stripe_price_id text
);

-- 購入履歴
create table purchases (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users not null,
  product_id uuid references products not null,
  stripe_session_id text,
  created_at timestamptz default now()
);

RLS（Row Level Security）の設定

SupabaseではRLSを必ず有効にしましょう。これを忘れると、全ユーザーのデータが丸見えになります。

alter table profiles enable row level security;

create policy "ユーザーは自分のプロフィールのみ閲覧可能"
  on profiles for select
  using (auth.uid() = id);

ステップ4：Vercelデプロイ

# Vercel CLIでデプロイ
npm i -g vercel
vercel

# 環境変数を設定
vercel env add NEXT_PUBLIC_SUPABASE_URL
vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY
vercel env add SUPABASE_SERVICE_ROLE_KEY

GitHubリポジトリを連携すれば、git push するだけで自動デプロイされます。

無料枠の制限と注意点

サービス	無料枠の制限	超過した場合
Vercel	月100GB帯域、サーバーレス実行100GB-hours	Proプラン $20/月
Supabase	500MB DB、1GB Storage、50K MAU	Proプラン $25/月
Stripe	なし（従量課金 3.6%）	—

まとめ

ステップ	内容	所要時間
セットアップ	Next.js + Supabase初期化	30分
認証	Supabase Auth導入	1〜2時間
DB設計	テーブル + RLS	1〜2時間
デプロイ	Vercel連携	15分

この構成なら、半日で認証付きWebアプリが完成します。あとは自分のアイデアに合わせて機能を追加していくだけです。

---