🎬
Next.js 15とGoogle Veo 3.1で構築した、次世代AI動画SaaS「VEDAI」の技術アーキテクチャ

2025/10/22に公開
 はじめにこんにちは！この記事では、私たちが開発したGoogle Veo 3.1特化型AI動画生成SaaS「VEDAI」の技術的な側面、特にアーキテクチャ設計と技術選定の背景について詳しく解説します。
AI動画生成は非常に強力ですが、それを安定したサービスとして提供するには、非同期タスクの管理、堅牢な課金・クレジットシステム、そして優れたUXが不可欠です。私たちの目標は、Next.js 15やReact 19といった最新の技術スタックを活用し、スケーラブルで保守性の高いプラットフォームを構築することでした。
この記事が、同じようにAIを活用したSaaS開発に挑戦している方々の参考になれば幸いです。
プロダクトサイト: https://www.vedai.app

 🎯 プロダクトのコンセプトと技術的な挑戦VEDAIは「Veo 3.1-first AI video studio」をコンセプトに掲げています。これは、単に多くのモデルを統合するのではなく、GoogleのフラッグシップモデルであるVeo 3.1の能力を最大限に引き出すことに集中するという戦略です。
このコンセプトを実現するための技術的な挑戦は以下の通りでした。

非同期タスクの堅牢な管理: 動画生成は数分かかる場合があるため、ユーザーを待たせることなく、完了時に確実に通知する仕組みが必要です。

柔軟なクレジット・課金システム: 新規登録ボーナス、サブスクリプション、追加購入など、複雑なクレジット管理を正確に行う必要があります。

モダンな開発体験とパフォーマンス: Next.js 15やReact 19の最新機能を活用し、開発効率とアプリケーションのパフォーマンスを両立させます。

 🛠️ テクニカルアーキテクチャ解説それでは、具体的な技術スタックと、それがどのように課題を解決しているかを見ていきましょう。

 フロントエンド: Next.js 15 App Router と React 19フロントエンドには、現時点で最新のNext.js 15.2.1とReact 19を採用しました。
App RouterとServer Actions: フォームの送信から動画生成リクエストまで、多くのクライアント・サーバー間のやり取りをServer Actionsで実装しました。これにより、APIルートを別途作成する手間が省け、コードの可読性が大幅に向上しました。Zodと組み合わせたnext-safe-actionにより、型安全なアクションを簡単に定義できます。
状態管理: サーバーから取得するデータはTanStack Queryで管理し、キャッシュや再取得を最適化しています。クライアントサイドのグローバルな状態（UIの状態など）はZustandでシンプルに管理しています。
国際化 (i18n): next-intlを導入し、パスベース（/zh/...）のルーティングと辞書の管理を行っています。デフォルト言語（英語）ではプレフィックスを省略するas-needed戦略を採用し、クリーンなURLを実現しました。
frontend/package.json
{
  "dependencies": {
    "next": "15.2.1",
    "react": "19.0.0",
    "typescript": "5.8",
    "next-intl": "4.0",
    "zustand": "...",
    "@tanstack/react-query": "...",
    "zod": "..."
  }
}
バックエンドとデータベース: PostgreSQL + Drizzle ORM
データベース: 堅牢性と拡張性を考慮し、PostgreSQLを選択しました。

ORM: Drizzle ORMを全面的に採用しました。Drizzleの最大の利点は、既存のDBスキーマからTypeScriptの型を推論してくれる点です。これにより、SQLクエリレベルでの完全な型安全性を実現し、開発中の多くのバグを防ぐことができました。、

// Drizzleスキーマ定義の例
import { pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core';

export const users = pgTable('user', {
  id: text('id').primaryKey(),
  // ...Better Authが管理する他のフィールド
});

export const credits = pgTable('credits', {
  id: uuid('id').defaultRandom().primaryKey(),
  userId: text('userId').references(() => users.id),
  // ...
});

外部サービス連携
認証: Better Authを採用し、Google OAuthやメール/パスワード認証、セッション管理、メール検証などを迅速に実装しました。

決済: Stripeと深く連携し、サブスクリプションとクレジットパックの購入に対応しています。Stripe Customer Portalにより、ユーザーはセルフサービスで請求情報を管理できます。

AI API連携:

ユーザーがフロントエンドから生成リクエストを送信（Server Action経由）。

サーバーサイドでクレジット残高を検証・減算。

**Kie AI API (Veo3)**へ非同期生成タスクをリクエスト。この際、完了通知を受け取るためのcallBackUrl（Webhookエンドポイント）を指定します。

Kie AIは動画生成が完了すると、指定されたWebhookに結果をPOSTします。

Webhookハンドラーがデータベースを更新し、ユーザーに通知します。

この非同期アーキテクチャにより、フロントエンドは長時間待機することなく、ユーザーに快適な体験を提供できます。

まとめ
VEDAIは、Next.js 15やDrizzle ORMといったモダンな技術スタックを基盤に、Veo 3.1という強力なAIモデルの能力を最大限に引き出すSaaSとして設計されました。特に、Server Actionsによる開発体験の向上と、Webhookを活用した堅牢な非同期処理フローが、このプロジェクトの成功の鍵だったと感じています。

もしAIを活用したSaaS開発に興味がある方がいらっしゃれば、ぜひVEDAIを試してみてください。技術的なフィードバックやご意見も大歓迎です！

最後までお読みいただき、ありがとうございました。
はじめに

🎯 プロダクトのコンセプトと技術的な挑戦

🛠️ テクニカルアーキテクチャ解説

フロントエンド: Next.js 15 App Router と React 19

Discussion
