🐡

Next.js + TypeScriptでAI画像生成SaaSを開発した話

に公開
Next.js
Tailwind CSS
SaaS
tech

はじめに

AIを活用した画像・動画生成プラットフォーム aipose.ai を開発しました。20種類以上のAIツールを提供するSaaSの開発経験を共有します。

主な機能

  • AIヘッドショット生成器: 100種類以上のプロフェッショナルスタイル
  • 画像編集: 背景除去、オブジェクト除去、画像拡張、色変更
  • ポートレートツール: 服装変更、表情変更、髪型変更、メイクアップ生成
  • 動画生成: テキストから動画、画像から動画

技術スタック

コア技術

// Next.js 15 App RouterでSEO最適化
export async function generateMetadata(): Promise<Metadata> {
  return {
    title: "AI画像・動画生成ツール",
    description: "AIで美しい画像と動画を作成",
  };
}

採用理由:

  • Next.js 15: サーバーコンポーネント、優れたSEO、標準最適化
  • TypeScript: 全体での型安全性
  • Turborepo: モノレポによるコード整理
  • Shadcn UI + Tailwind: 高速でカスタマイズ可能なUI開発
  • Prisma: 型安全なDB操作
  • Stripe: 決済処理

モノレポ構成

poseai-app/
├── apps/web/         # Next.jsアプリケーション
├── packages/
│   ├── ai/          # AIサービス統合
│   ├── api/         # APIルート
│   ├── database/    # Prismaスキーマ
│   ├── payments/    # Stripe統合
│   └── ...

この構成により、コードのモジュール化と再利用性を実現しました。

技術的なポイント

1. 100種類のヘッドショットスタイル

export interface GenerateHeadshotParams {
  imageData: string;
  style: HeadshotStyle;        // 100種類以上
  backgroundType: BackgroundType;
  quantity: number;
}

const HEADSHOT_STYLES = [
  {
    name: "Corporate Business",
    style: "corporate-business",
    prompt: "プロフェッショナルなビジネススーツでの企業向けヘッドショット..."
  },
  // ... 99種類以上
];

2. モジュラー設計

各AI機能は独立したモジュールとして実装:

// packages/ai/lib/ai-headshot.ts
export async function generateHeadshotPack(
  params: GenerateHeadshotParams
): Promise<GeneratedHeadshot[]> {
  const prompt = buildHeadshotPrompt(params.style, params.backgroundType);
  return await generateImageWithGemini({ ...params, prompt });
}

3. クレジットシステム

await prisma.$transaction(async (tx) => {
  const user = await tx.user.findUnique({ where: { id: userId } });

  if (user.credits < amount) {
    throw new Error('クレジット不足');
  }

  await tx.user.update({
    where: { id: userId },
    data: { credits: { decrement: amount } }
  });
});

課題と解決策

課題 解決策
大きな画像のアップロードでタイムアウト クライアント側で圧縮してからアップロード
AI APIの失敗 指数バックオフによるリトライロジック
AIコストの管理 クレジット制 + レート制限 + 使用量監視

パフォーマンス最適化

  • Next.js Imageコンポーネント + WebP形式
  • 重いコンポーネントの動的インポート
  • APIルートキャッシング
  • 静的アセットのCDN配信

学んだこと

  1. モノレポの価値: 初期設定に時間がかかるが、長期的には組織化が大幅に改善
  2. プロンプトエンジニアリング: 適切に作成されたプロンプトでAI出力品質が10倍向上
  3. コスト監視: AI APIは高額 - 使用制限と監視の実装が必須

まとめ

Next.js + TypeScriptの組み合わせは、AI SaaSの構築に最適です。主なポイント:

  • 実績のある技術スタック選択
  • サービスのモジュール化
  • 早期のパフォーマンス最適化
  • コスト管理の徹底

aipose.ai で実際の動作をご覧ください！

コメント

質問やフィードバックがあれば、お気軽にコメントください！

Discussion