セットアップガイド

# 概要

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

ディレクトリ構造

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

# チュートリアル動画

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

# クイックスタート

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

# unzip
unzip startpack.zip
cd startpack

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

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

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

npm run db:migrate

npm run dev

# 環境変数

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

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

# 認証（Neon Auth / Better Auth）
NEXT_PUBLIC_NEON_AUTH_URL=https://ep-xxx.neonauth.region.aws.neon.tech/neondb/auth

# 退会機能（Neon API でユーザー削除）
# 設定しない場合、退会時に認証ユーザーは削除されません（手動削除が必要）
NEON_API_TOKEN=neon_api_key_...
NEON_PROJECT_ID=your-project-id
NEON_BRANCH_ID=br-xxx-xxx-123456

# 決済（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_...

# カスタマーポータル

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クライアントを生成（初回/スキーマ変更時）
npm run db:generate

# データベースをリセット
npm run db:migrate

# 注意: Prismaは .env を読み込みます（.env.local のみではNG）
# 重要: npx prisma ではなく npm run db:* を使用してください（Prisma 7互換性問題を回避）

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