セットアップガイド

# 概要

StartPackは、TypeScript + Next.jsをベースに、認証、決済、お問い合わせフォームが事前設定された完全なSaaS基盤を提供します。

ディレクトリ構造

startpack/
├── app/                    # Next.js App Router
│   ├── api/               # APIルート
│   ├── auth/              # 認証ページ
│   ├── billing/           # サブスクリプション管理
│   ├── dashboard/         # ユーザーダッシュボード
│   ├── contact/           # お問い合わせフォーム
│   ├── handler/           # Stack Auth設定
│   └── legal/             # 利用規約等
├── components/            # Reactコンポーネント
├── lib/                   # ユーティリティ関数
├── prisma/                # データベーススキーマ
├── config/                # アプリ設定
├── public/                # 静的ファイル
└── styles/                # グローバルスタイル

# チュートリアル動画

StartPackの機能紹介から実際のセットアップ手順まで、動画でわかりやすく解説しています。

# クイックスタート

アプリケーションをローカル環境で起動する手順です。

# unzip
unzip startpack.zip
cd startpack

# 初期化（必ず先に実行）
npm run startpack:init
# プロンプトで番号を入力してプロバイダを選択します
# 1) Neon（StackAuth） / 2) Supabase Auth
# 選択したプロバイダ以外の依存とコードは自動で削除されます

# 依存をインストール（init の後）
npm install

# .env DATABASE_URL="postgresql://user:password@ep-xxx.region.aws.neon.tech/neondb?sslmode=require"

npx prisma migrate dev

npm run dev

# 環境変数

プロバイダ別のテンプレートを切替表示できます。

# データベース（Neon）
DATABASE_URL=postgresql://user:password@host/database?sslmode=require

# 認証（Neon Auth / StackAuth）
NEXT_PUBLIC_STACK_PROJECT_ID=your-project-id
NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=your-publishable-key
STACK_SECRET_SERVER_KEY=your-secret-server-key

# 決済（Stripe）
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_PRICE_ID=price_...
STRIPE_WEBHOOK_SECRET=whsec_...

# メール（Resend）
RESEND_API_KEY=re_...
CONTACT_EMAIL=you@example.com
# RESEND_FROM=support@yourdomain.com
# RESEND_DOMAIN=yourdomain.com

# レート制限（任意）
CONTACT_RATE_LIMIT_WINDOW_MS=60000
CONTACT_RATE_LIMIT_MAX=5

# 認証設定

# 決済連携

Stripe設定

1. APIキー

1. Stripeダッシュボードにログイン
2. （開発環境）右上の テストモード（サンドボックス）をON
3. 開発者 → APIキー に移動
4. 公開可能キー（NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY）とシークレットキー（STRIPE_SECRET_KEY）の両方をコピー

STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

2. サブスクリプション商品の作成

開発環境では テストモード 側で商品/価格を作成してください（本番とは別管理です）。

1. 商品 → 商品を追加 に移動
2. 商品名と価格を設定
3. 課金タイプは「継続」、請求周期は「毎月」を選択
4. Price ID（形式: price_xxx）をコピー

STRIPE_PRICE_ID=price_...

3. Webhook設定

Stripe CLIでのローカル開発

インストール手順はStripe CLI公式ドキュメントを参照してください。

事前に Stripe ダッシュボードへ テスト（サンドボックス）環境でログインしてから、下記の stripe login を実行してください（ブラウザが開いて認証されます）。

# ログイン
stripe login

# webhookをlocalhostに転送
stripe listen --forward-to localhost:3002/api/stripe/webhook

# 表示されたwebhookシークレットをコピー

STRIPE_WEBHOOK_SECRET=whsec_...

# 有料プラン加入中の判定

クライアント側（React）の例

// 任意のコンポーネント内
import { useEffect, useState } from 'react'

type SubStatus = 'active' | 'trialing' | 'past_due' | 'canceled' | 'incomplete' | 'unpaid'

function usePaidPlan() {
  const [loading, setLoading] = useState(true)
  const [isPaid, setIsPaid] = useState(false)
  const [cancelAtPeriodEnd, setCancelAtPeriodEnd] = useState(false)

  useEffect(() => {
    let mounted = true
    ;(async () => {
      try {
        const res = await fetch('/api/stripe/subscription', { cache: 'no-store' })
        if (!mounted) return
        if (!res.ok) { setIsPaid(false); setLoading(false); return }
        const data = await res.json()
        const status: SubStatus | null = data?.subscription?.status ?? null
        const cancelFlag: boolean = Boolean(data?.subscription?.cancelAtPeriodEnd)
        const paid = status === 'active' || status === 'trialing' || status === 'past_due'
        setIsPaid(Boolean(status && paid))
        setCancelAtPeriodEnd(cancelFlag)
      } catch { setIsPaid(false) } finally { setLoading(false) }
    })()
    return () => { mounted = false }
  }, [])
  return { loading, isPaid, cancelAtPeriodEnd }
}

// 使い方例
export default function PremiumGate({ children }: { children: React.ReactNode }) {
  const { loading, isPaid, cancelAtPeriodEnd } = usePaidPlan()
  if (loading) return <div className='text-gray-400 text-sm'>読み込み中...</div>
  if (!isPaid) return <div className='text-gray-400 text-sm'>プラン登録が必要です</div>
  return <div>{children}{cancelAtPeriodEnd && <div className='mt-2 text-xs text-gray-500'>キャンセル予定（期日まではご利用可）</div>}</div>
}

サーバー側（Route / Server Component）の例

// 例) /app/premium/page.tsx （Server Component）
import 'server-only'

async function fetchSubscription() {
  const res = await fetch('/api/stripe/subscription', { cache: 'no-store' })
  if (!res.ok) return null
  return res.json()
}

export default async function PremiumPage() {
  const data = await fetchSubscription()
  const status = data?.subscription?.status as ('active'|'trialing'|'past_due'|'canceled'|'incomplete'|'unpaid') | undefined
  const isPaid = status === 'active' || status === 'trialing' || status === 'past_due'
  if (!isPaid) {
    return <div className='p-6 text-sm text-gray-400'>プラン登録が必要です</div>
  }
  return <div className='p-6'>有料ページの内容</div>
}

# カスタマーポータル

Stripeのカスタマーポータルを有効化して、ユーザーが自分で支払い方法や請求履歴、キャンセル/再開を管理できるようにします。

Stripeダッシュボードで有効化

1. Stripeダッシュボード → 設定 → Billing → カスタマーポータル
2. カスタマーポータルのリンクを有効にする をオン

# メール設定

Resendセットアップ

1. resend.com でサインアップ
2. ダッシュボードでAPIキーを作成
3. RESEND_API_KEY に追加
4. お問い合わせフォームの受信用に CONTACT_EMAIL を設定

ドメイン検証（本番環境）

1. Resendダッシュボードでドメインを追加
2. DNSレコードを設定（SPF、DKIM）
3. ドメイン所有権を確認
4. .envの RESEND_DOMAIN を更新

# お問い合わせフォームのレートリミット

お問い合わせフォームには、スパム防止のためのレートリミット機能が搭載されています。 同一IPアドレスから短時間に大量のリクエストが送信された場合、一時的にアクセスを制限します。

# お問い合わせメールのカスタマイズ

お問い合わせフォームのメール送信は /app/api/contact/route.ts で実装されています。 テキスト形式のメールで、件名・本文・送信元を自由にカスタマイズできます。

subject: `【サービス名】お問い合わせ from ${safeName}`

from: `サポート <support@yourdomain.com>`

text: `お問い合わせありがとうございます

お名前: ${safeName}
メールアドレス: ${safeEmail}

お問い合わせ内容:
${safeMessage}

---
このメールは自動送信されています。
サポートチーム`

# トラブルシューティング

# Prismaクライアントを生成（初回/スキーマ変更時）
npx prisma generate

# データベースをリセット
npx prisma migrate reset

# 注意: Prismaは .env を読み込みます（.env.local のみではNG）

# キャッシュをクリアして再インストール
rm -rf node_modules .next
npm install
npm run build