Next.js 14でAI搭載のPNGからSVGコンバーターを作った方法

VectoSolveの構築を始めた時、目標は一つでした：画像のベクター化を誰でもアクセスできるようにすること。シンプルなプロジェクトに見えたものが、画像処理、AI API、Next.jsパフォーマンス最適化への深い探求に変わりました。

ここでは、まさにどのように構築したかを解説します。

課題

ラスター画像（PNG、JPG）をベクターグラフィックス（SVG）に変換することは常に面倒でした：

• Adobe IllustratorのImage Trace：月額$22、急な学習曲線
• 無料オンラインツール：遅い、低品質、しつこいアップセル
• 手動トレース：1つのロゴに何時間もの作業

単純に動くものが欲しかった — 画像をアップロードして、数秒でクリーンなSVGを取得する。

技術スタックの選択

フレームワーク:  Next.js 14 (App Router)
データベース:    Supabase (Postgres + Auth)
決済:           Stripe (サブスクリプション + クレジット)
スタイリング:    Tailwind CSS
デプロイ:       Vercel
AI/処理:        複数のAPI（ベクター化、アップスケーリング、背景除去）

なぜNext.js 14 App Router？

1. デフォルトでServer Components — クライアントサイドJavaScriptが少なく、初期ロードが高速
2. Route Handlers — ページと共存するクリーンなAPI routes
3. Streaming — データ読み込み中にUIを即座に表示
4. 静的生成 — SEO向けにビルド時に500以上のページを生成

アーキテクチャ概要

アーキテクチャはシンプルですがスケーラブル：

• フロントエンド：React Server ComponentsとNext.js App Router
• API Routes：変換、アップロード、ユーザー管理を処理
• データベース：ユーザーデータ、クレジット、変換履歴にSupabase
• 決済：月額・年額サブスクリプションにStripe
• AI API：実際のベクター化用の外部サービス

変換パイプライン

ステップ1：画像アップロード

アップロードコンポーネントはシンプルなドラッグ＆ドロップインターフェースを使用。サーバーに送信する前にクライアントサイドでファイルタイプを検証：

const handleDrop = async (e: DragEvent) => {
  e.preventDefault()
  const file = e.dataTransfer?.files[0]
  
  if (!file) return
  if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type)) {
    toast.error('Unsupported format')
    return
  }
  
  const base64 = await fileToBase64(file)
  onUpload(base64, file.name)
}

ステップ2：サーバーサイド処理

API routeが認証、クレジット検証、変換を処理：

export async function POST(request: NextRequest) {
  const supabase = createClient()
  
  // Verify user has credits
  const { data: { user } } = await supabase.auth.getUser()
  const credits = await getUserCredits(user.id)
  
  if (credits < 1) {
    return NextResponse.json({ error: 'Insufficient credits' }, { status: 402 })
  }
  
  // Process the image
  const { image, format } = await request.json()
  const result = await vectorizeImage(image, { outputFormat: format || 'svg' })
  
  // Deduct credit and return
  await deductCredit(user.id, 1)
  return NextResponse.json({ success: true, svg: result.svg })
}

ステップ3：リアルタイムフィードバック

ユーザーは変換中に進捗更新を確認できます。実際の変換に数秒かかっても、体感パフォーマンスが向上します。

「無料ティアから始めましょう。最初の1000ユーザーは無料変換から来ました。信頼を構築します — そして信頼は有料顧客に変わります。」 - VectoSolve

SEO：500以上の静的ページ

VectoSolveの成長エンジンの一つはプログラマティックSEOです。各変換タイプのページを生成：

• /convert/png-to-svg
• /convert/jpg-to-svg
• /convert/logo-to-svg
• ... 他20以上

さらに、各ページはgenerateStaticParamsを使って10言語に翻訳：

export async function generateStaticParams() {
  const locales = ['fr', 'es', 'de', 'pt', 'it', 'nl', 'ru', 'ja', 'ko', 'tr']
  const slugs = conversionPages.map(p => p.slug)
  
  const params = []
  for (const locale of locales) {
    for (const slug of slugs) {
      params.push({ locale, slug })
    }
  }
  return params // 10 locales x 21 pages = 210 pages
}

これにより、ビルド時に210のローカライズされたページが生成されます。すべてユニークなメタコンテンツ、正しいhreflangタグ、FAQスキーマ付き。

パフォーマンス最適化

1. ダイナミックインポート

重いコンポーネントは必要な時だけロード：

const LogoGenerator = dynamic(
  () => import('@/components/LogoGenerator'),
  { loading: () => <Skeleton />, ssr: false }
)

2. 画像最適化

ブラープレースホルダー付きのNext.js Imageコンポーネントで瞬時の体感ロード。

3. Edge Runtime

API routesがedgeで実行され、ユーザーに近い場所でレスポンス時間を40%短縮。

学んだ教訓

1. 無料ティアから始める — 最初の1000ユーザーは無料変換から来ました。信頼を築きます。

2. クレジットはサブスクリプションより効果的 — このようなツールでは、ユーザーは従量課金を好みます。

3. i18nは成長ハック — 10言語の追加でオーガニックトラフィックが2ヶ月で3倍に。

4. スキーママークアップは重要 — FAQとHowToスキーマで数週間以内にフィーチャードスニペットを獲得。

次のステップ

• パブリックAPI — 開発者向け（バッチ処理）
• Chrome拡張機能 — 素早い変換用
• Figmaプラグイン — デザインワークフロー用

自分で試してみてください： VectoSolve — 最初の画像を無料プレビュー、登録不要。

ご質問は？ contact@vectosolve.com までお問い合わせください。

参考資料

• web.dev Performance — Core Web Vitals最適化、画像読み込み戦略、Next.jsパフォーマンスベストプラクティス
• Google Search Central — プログラマティックSEOガイドライン、構造化データ実装、多言語サイト設定
• Smashing Magazine — Next.jsアーキテクチャパターン、SaaS開発ケーススタディ、フルスタックReactアプリガイド
• Moz SEO Blog — SaaS製品のSEO戦略、開発者ツールのキーワードリサーチ、テクニカルSEO実装
• MDN Web Docs — SVG — ブラウザでのSVGレンダリング、Canvas API比較、サーバーサイドSVG処理リファレンス