Wie ich einen KI-gestützten PNG-zu-SVG-Konverter mit Next.js 14 gebaut habe

Als ich anfing, VectoSolve zu bauen, hatte ich ein Ziel: Bildvektorisierung für alle zugänglich machen. Was wie ein einfaches Projekt aussah, wurde zu einem tiefen Eintauchen in Bildverarbeitung, KI-APIs und Next.js-Performance-Optimierung.

Hier ist genau, wie ich es gebaut habe.

Das Problem

Rasterbilder (PNG, JPG) in Vektorgrafiken (SVG) umzuwandeln war schon immer mühsam:

• Adobe Illustrators Image Trace: 22$/Monat, steile Lernkurve
• Kostenlose Online-Tools: Langsam, niedrige Qualität, aggressive Upsells
• Manuelles Nachzeichnen: Stunden Arbeit für ein einzelnes Logo

Ich wollte etwas, das einfach funktioniert — Bild hochladen, sauberes SVG in Sekunden bekommen.

Tech-Stack-Entscheidung

Framework:    Next.js 14 (App Router)
Datenbank:    Supabase (Postgres + Auth)
Zahlungen:    Stripe (Abonnements + Credits)
Styling:      Tailwind CSS
Deployment:   Vercel
KI/Verarbeitung: Mehrere APIs (Vektorisierung, Upscaling, Hintergrundentfernung)

Warum Next.js 14 App Router?

1. Server Components als Standard — Weniger clientseitiges JavaScript, schnellerer initialer Load
2. Route Handlers — Saubere API Routes, die mit den Seiten zusammen liegen
3. Streaming — UI sofort anzeigen, während Daten laden
4. Statische Generierung — Über 500 Seiten beim Build für SEO generiert

Architektur-Überblick

Die Architektur ist einfach aber skalierbar:

• Frontend: Next.js App Router mit React Server Components
• API Routes: Verarbeiten Konvertierung, Uploads und Benutzerverwaltung
• Datenbank: Supabase für Benutzerdaten, Credits und Konvertierungshistorie
• Zahlungen: Stripe für monatliche und jährliche Abonnements
• KI-APIs: Externe Dienste für die eigentliche Vektorisierung

Die Konvertierungs-Pipeline

Schritt 1: Bild-Upload

Die Upload-Komponente nutzt eine einfache Drag-and-Drop-Oberfläche. Wir validieren Dateitypen clientseitig vor dem Senden an den Server:

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)
}

Schritt 2: Serverseitige Verarbeitung

Die API Route übernimmt Authentifizierung, Credit-Verifizierung und die eigentliche Konvertierung:

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 })
}

Schritt 3: Echtzeit-Feedback

Nutzer sehen Fortschrittsupdates während der Konvertierung. Das verbessert die wahrgenommene Performance, auch wenn die eigentliche Konvertierung einige Sekunden dauert.

"

Starte mit einem kostenlosen Tier. Unsere ersten 1000 Nutzer kamen über die kostenlose Konvertierung. Das schafft Vertrauen — und Vertrauen konvertiert zu zahlenden Kunden.

SEO: Über 500 Statische Seiten

Einer der Wachstumsmotoren von VectoSolve ist programmatisches SEO. Wir generieren Seiten für jeden Konvertierungstyp:

• /convert/png-to-svg
• /convert/jpg-to-svg
• /convert/logo-to-svg
• ... und über 20 weitere

Außerdem wird jede Seite mit generateStaticParams in 10 Sprachen übersetzt:

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
}

Das generiert 210 lokalisierte Seiten beim Build, alle mit einzigartigem Meta-Content, korrekten hreflang-Tags und FAQ-Schema.

Performance-Optimierungen

1. Dynamische Imports

Schwere Komponenten laden nur bei Bedarf:

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

2. Bildoptimierung

Die Next.js Image-Komponente mit Blur-Platzhaltern für sofortige wahrgenommene Ladezeit.

3. Edge Runtime

API Routes laufen auf dem Edge, näher an den Nutzern, und reduzieren die Antwortzeiten um 40%.

Gelernte Lektionen

1. Starte mit einem kostenlosen Tier — Unsere ersten 1000 Nutzer kamen über die kostenlose Konvertierung. Das schafft Vertrauen.

2. Credits funktionieren besser als Abonnements für Tools wie dieses. Nutzer bevorzugen Pay-as-you-go.

3. i18n ist ein Wachstums-Hack — 10 Sprachen hinzuzufügen hat unseren organischen Traffic in 2 Monaten verdreifacht.

4. Schema Markup zählt — FAQ- und HowTo-Schemas brachten uns Featured Snippets innerhalb von Wochen.

Was kommt als Nächstes

• Öffentliche API für Entwickler (Batch-Verarbeitung)
• Chrome Extension für schnelle Konvertierungen
• Figma Plugin für Design-Workflows

Probier es selbst aus: VectoSolve — kostenlose Vorschau deines ersten Bildes, ohne Anmeldung.

Fragen? Schreib uns an contact@vectosolve.com.

Quellen & Weiterführende Lektüre

• web.dev Performance — Core Web Vitals-Optimierung, Bildlade-Strategien und Next.js-Performance Best Practices
• Google Search Central — Richtlinien für programmatisches SEO, Implementierung strukturierter Daten und Konfiguration mehrsprachiger Websites
• Smashing Magazine — Next.js-Architekturmuster, SaaS-Entwicklungs-Fallstudien und Full-Stack-React-Anwendungsguides
• Moz SEO Blog — SEO-Strategie für SaaS-Produkte, Keyword-Recherche für Entwickler-Tools und technische SEO-Implementierung
• MDN Web Docs — SVG — SVG-Rendering in Browsern, Canvas API-Vergleiche und serverseitige SVG-Verarbeitungsreferenz