Vercel Deployment

Vercel ist die empfohlene Hosting-Plattform für Kit. Sie bietet Zero-Configuration Next.js Deployment, automatische Preview-Umgebungen für jeden Pull Request, integrierte Analytics und Edge-Network-Verteilung — alles optimiert für den Next.js App Router, den Kit verwendet.

Voraussetzungen

Bevor du deployest, stelle sicher, dass du Folgendes hast:

Einen Vercel-Account (das kostenlose Tier reicht für den Einstieg)
Dein Kit-Repository wurde zu GitHub gepusht
Alle externen Dienste konfiguriert (Datenbank, Clerk, Lemon Squeezy, etc.)

Schließe dein lokales Setup ab und verifiziere, dass alle Features mit pnpm dev:boilerplate funktionieren, bevor du deployest. Konfigurationsprobleme zu debuggen ist in deiner lokalen Umgebung deutlich einfacher als in Production.

Vercel-Projekt erstellen

Repository verbinden

Gehe zu vercel.com/new
Wähle Import Git Repository und wähle dein Kit-Repository
Vercel erkennt das Next.js Framework automatisch

Build-Einstellungen konfigurieren

Setze die folgende Build-Konfiguration:

Einstellung	Wert
Framework Preset	Next.js
Build Command	`pnpm build`
Output Directory	`.next` (Standard)
Install Command	`pnpm install`
Node.js Version	20.x

Wenn du Kit innerhalb eines Monorepos betreibst, setze das Root Directory auf apps/boilerplate. Vercel beschränkt den Build auf dieses Verzeichnis und erkennt das richtige Framework.

Deployen

Klicke auf Deploy. Vercel führt den Build-Befehl aus, bündelt deine Anwendung und deployt sie auf eine .vercel.app-Subdomain. Das erste Deployment dauert typischerweise 2-3 Minuten.

Umgebungsvariablen

Konfiguriere alle erforderlichen Umgebungsvariablen im Vercel Dashboard unter Settings > Environment Variables. Gruppiere sie nach Dienst:

Kerndienste

Variable	Dienst	Erforderlich
`DATABASE_URL`	Supabase (gepoolte Verbindung)	Ja
`DIRECT_URL`	Supabase (direkte Verbindung)	Ja
`NEXT_PUBLIC_SUPABASE_URL`	Supabase	Ja
`NEXT_PUBLIC_SUPABASE_ANON_KEY`	Supabase	Ja
`SUPABASE_SERVICE_ROLE_KEY`	Supabase	Ja
`NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`	Clerk	Ja
`CLERK_SECRET_KEY`	Clerk	Ja
`CLERK_WEBHOOK_SECRET`	Clerk	Ja
`LEMONSQUEEZY_API_KEY`	Lemon Squeezy	Ja
`LEMONSQUEEZY_STORE_ID`	Lemon Squeezy	Ja
`LEMONSQUEEZY_WEBHOOK_SECRET`	Lemon Squeezy	Ja
`RESEND_API_KEY`	Resend	Ja
`RESEND_FROM_EMAIL`	Resend	Ja
`BLOB_READ_WRITE_TOKEN`	Vercel Blob	Ja
`UPSTASH_REDIS_REST_URL`	Upstash Redis	Ja
`UPSTASH_REDIS_REST_TOKEN`	Upstash Redis	Ja

Anwendungseinstellungen

Variable	Zweck	Beispiel
`NEXT_PUBLIC_APP_URL`	Production-Domain	`https://yourdomain.com`
`ALLOWED_ORIGINS`	CORS-Whitelist	`https://yourdomain.com`
`CRON_SECRET`	Vercel Cron-Authentifizierung	Zufälliger String mit mind. 32 Zeichen
`COLOR_THEME`	UI-Farbthema	`default`
`NEXT_PUBLIC_PRICING_MODEL`	Preismodell	`credit_based` oder `subscription`

KI-Provider-Schlüssel (Optional)

Variable	Provider
`OPENAI_API_KEY`	OpenAI
`ANTHROPIC_API_KEY`	Anthropic
`GOOGLE_GENERATIVE_AI_API_KEY`	Google AI
`XAI_API_KEY`	xAI

Aktiviere KI-Features mit Feature Flags:

Flag	Feature
`NEXT_PUBLIC_AI_LLM_CHAT_ENABLED`	LLM-Chat-Interface
`NEXT_PUBLIC_AI_RAG_CHAT_ENABLED`	RAG-Chat mit Dokument-Upload

Vercel unterstützt drei Umgebungs-Scopes: Production, Preview und Development. Setze mindestens alle Variablen für den Production-Scope. Für Preview kannst du Staging-Zugangsdaten verwenden, um zu verhindern, dass Testdaten die Production-Datenbank verunreinigen.

Production-Konfiguration

Kit enthält zwei Konfigurationsdateien, die Vercel während des Deployments automatisch liest.

Cron Jobs

Die vercel.json-Datei definiert geplante Aufgaben, die automatisch ausgeführt werden:

vercel.json — Cron Job Configuration

{
  "crons": [
    {
      "path": "/api/cron/check-trials",
      "schedule": "0 2 * * *"
    },
    {
      "path": "/api/cron/expire-bonus-credits",
      "schedule": "0 3 * * *"
    }
  ]
}

Cron Job	Zeitplan	Zweck
`/api/cron/check-trials`	Täglich um 2:00 Uhr UTC	Erkennt abgelaufene Trial-Abonnements und stuft Benutzer herab
`/api/cron/expire-bonus-credits`	Täglich um 3:00 Uhr UTC	Entfernt abgelaufene Bonus-Credits von Benutzerkonten

Beide Endpunkte überprüfen die CRON_SECRET-Umgebungsvariable vor der Ausführung. Setze diesen Wert auf einen zufälligen String mit mindestens 32 Zeichen in deinen Vercel-Umgebungsvariablen.

Ohne CRON_SECRET lehnen die Cron-Endpunkte alle Anfragen ab. Generiere einen sicheren Wert mit openssl rand -base64 32 und füge ihn zu deinen Vercel-Umgebungsvariablen hinzu.

Next.js-Konfiguration

Die next.config.mjs enthält production-kritische Einstellungen, die automatisch angewendet werden:

next.config.mjs — Core Production Settings

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx'],
  reactStrictMode: true,
  swcMinify: true,

reactStrictMode — Findet häufige Bugs während der Entwicklung, kein Overhead in Production
swcMinify — Verwendet den SWC-Compiler für Minifizierung (schneller als Terser)
image formats — Liefert AVIF und WebP automatisch basierend auf Browser-Unterstützung

next.config.mjs — Security Headers

// Security Headers
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-DNS-Prefetch-Control',
            value: 'on',
          },
          {
            key: 'X-Frame-Options',
            value: 'SAMEORIGIN',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-XSS-Protection',
            value: '1; mode=block',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
          {
            key: 'Permissions-Policy',
            value: 'camera=(), microphone=(self), geolocation=(), interest-cohort=(), payment=(), usb=()',
          },
          {
            key: 'Content-Security-Policy',
            value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim(),
          },
        ],
      },
    ]
  },

Diese Sicherheits-Header werden auf alle Routen angewendet und umfassen Content-Security-Policy, X-Frame-Options, X-Content-Type-Options und Referrer-Policy. Siehe die Sicherheitsübersicht für Details zu jedem Header.

Preview Deployments

Jeder Pull Request erhält automatisch seine eigene Deployment-URL. Vercel erstellt eine einzigartige Preview-Umgebung mit dem Code des PRs, fügt einen Kommentar zum PR mit dem Preview-Link hinzu und entfernt sie, wenn der PR geschlossen wird.

Preview Deployments sind nützlich für:

Code-Reviews — Reviewer können Änderungen in einer echten Umgebung testen, bevor sie gemergt werden
QA-Tests — Teste Zahlungsabläufe, Auth-Abläufe und KI-Features, ohne Production zu beeinflussen
Stakeholder-Demos — Teile einen Link mit nicht-technischen Teammitgliedern

Erstelle einen separaten Satz von Umgebungsvariablen für den Preview-Scope mit Staging-Zugangsdaten. Das verhindert, dass Test-Anmeldungen, Zahlungen und E-Mails Production-Dienste erreichen.

Benutzerdefinierte Domain

Domain hinzufügen

Gehe zu Settings > Domains in deinem Vercel-Projekt und füge deine Domain hinzu (z.B. yourdomain.com).

DNS konfigurieren

Füge die DNS-Einträge hinzu, die Vercel bereitstellt. Typischerweise:

Typ	Name	Wert
`A`	`@`	`76.76.21.21`
`CNAME`	`www`	`cname.vercel-dns.com`

Umgebungsvariablen aktualisieren

Setze NEXT_PUBLIC_APP_URL auf deine Production-Domain:

bash

NEXT_PUBLIC_APP_URL=https://yourdomain.com

Aktualisiere auch ALLOWED_ORIGINS, um deine Domain für CORS einzuschließen:

bash

ALLOWED_ORIGINS=https://yourdomain.com

Externe Dienste aktualisieren

Richte Webhooks und Callback-URLs auf deine Production-Domain aus:

Clerk — Aktualisiere die Sign-in/Sign-up-Redirect-URLs und den Webhook-Endpunkt
Lemon Squeezy — Aktualisiere die Webhook-URL auf https://yourdomain.com/api/webhooks/lemonsqueezy
Resend — Verifiziere deine Domain für den E-Mail-Versand

Manuelles Deployment per CLI

Für Fälle, in denen du außerhalb der GitHub-Integration deployen musst (Debugging, Hotfixes), verwende die Vercel CLI:

bash

# Vercel CLI installieren
pnpm add -g vercel@latest

# Bei Vercel anmelden
vercel login

# Auf Preview deployen
vercel

# Auf Production deployen
vercel --prod

Die CI/CD-Pipeline verwendet --archive=tgz, um Dateien vor dem Upload zu komprimieren, was Rate-Limit-Fehler bei Projekten mit vielen Dateien vermeidet:

bash

vercel deploy --prebuilt --prod --archive=tgz --token=$VERCEL_TOKEN

Fehlerbehebung

Build schlägt wegen fehlender Umgebungsvariablen fehl

Vercel-Builds laufen in einer sauberen Umgebung. Jede Variable, die dein Build-Prozess liest, muss im Vercel Dashboard konfiguriert sein. Prüfe die Build-Logs auf undefined-Werte und füge die fehlenden Variablen hinzu.

Cron Jobs laufen nicht

Prüfe, ob vercel.json im Projekt-Root liegt (oder im Root Directory, das du konfiguriert hast)
Bestätige, dass CRON_SECRET in den Production-Umgebungsvariablen gesetzt ist
Prüfe den Cron-Tab im Vercel Dashboard, um den Ausführungsverlauf zu sehen

Preview Deployments erscheinen nicht

Stelle sicher, dass die Vercel GitHub-Integration Zugriff auf das Repository hat. Gehe zu Settings > Git in Vercel und überprüfe das verbundene Repository.

Voraussetzungen

Vercel-Projekt erstellen

Repository verbinden

Build-Einstellungen konfigurieren

Deployen

Umgebungsvariablen

Kerndienste

Anwendungseinstellungen

KI-Provider-Schlüssel (Optional)

Production-Konfiguration

Cron Jobs

Next.js-Konfiguration

Preview Deployments

Benutzerdefinierte Domain

Domain hinzufügen

DNS konfigurieren

Umgebungsvariablen aktualisieren

Externe Dienste aktualisieren

Manuelles Deployment per CLI

Fehlerbehebung

Build schlägt wegen fehlender Umgebungsvariablen fehl

Cron Jobs laufen nicht

Preview Deployments erscheinen nicht

Related