Next.js + Supabase + Stripe で有料コンテンツ販売を実装する完全ガイド

なぜ「自分のサイトで」有料コンテンツを売るのか

note、Zenn、Brain——有料記事を売れるプラットフォームはいくらでもある。

なのに、わざわざ自分のサイトに決済機能を組み込む理由は3つ。

1. 手数料が安い — Stripe は 3.6%。noteは 10〜20%
2. 顧客データが自分のもの — メールアドレス、購入履歴、全て自分のDBに残る
3. 自由度が高い — プレビュー範囲、価格、UIを完全にコントロールできる

この記事では、このブログ（masatoman.net）に実際に実装した有料記事機能の技術的な全容を解説する。

この記事でわかること:

• アーキテクチャ全体像（認証・決済・コンテンツ分割の設計）
• Supabase Magic Link 認証の実装
• Stripe Checkout 一回払いの組み込み方
• MDXペイウォールのサーバーサイド実装
• Webhook による購入記録の自動保存
• 本番運用に必要な設定チェックリスト

前提スタック:

• Next.js 16（App Router）
• Supabase（認証 + DB）
• Stripe（決済）
• Vercel（ホスティング）
• MDX（記事コンテンツ）

---

アーキテクチャ全体像

有料記事機能は、大きく4つのレイヤーで構成される。

レイヤー	担当	技術
認証	ユーザーの特定	Supabase Auth（Magic Link）
決済	お金の受け取り	Stripe Checkout
記録	購入履歴の保存	Supabase DB + Webhook
表示	コンテンツの出し分け	MDX + サーバーコンポーネント

購入フロー:

読者が購入ボタンをクリック
  → 未ログイン → Magic Linkでログイン → 記事に戻る
  → ログイン済み → Stripe Checkout画面へ
  → 決済完了 → Webhook → DBに購入記録保存
  → 記事ページリロード → 全文表示