Claude Code Vercel: Deployment und Hosting für Web-Apps mit KI

Vercel hat das Deployment von Web-Applikationen grundlegend verändert: kein Server-Setup, kein manuelles Build-Management, keine Konfiguration von SSL-Zertifikaten. Push to deploy — das war der Versprechen, und für Next.js, React, Vue und Svelte löst Vercel es tatsächlich ein. Was dabei trotzdem komplex bleibt: vercel.json Konfiguration, Environment-Management über mehrere Stages, Edge Functions und Custom Domains. Genau hier setzt Claude Code an.

Dieser Artikel zeigt, wie Claude Code und Vercel zusammenspielen: von den ersten CLI-Befehlen bis zu produktionsreifen Deployment-Pipelines mit Preview-Environments, Serverless Functions und sauberem Secret-Management.

1. Warum Vercel für moderne Web-Apps

Vercel ist die Plattform, auf der Next.js entstanden ist — und das merkt man. Zero-Config bedeutet: du verbindest dein GitHub-Repository, Vercel erkennt das Framework automatisch, richtet Build-Prozess und Deployment-Pipeline ein, stellt ein CDN bereit und aktiviert HTTPS — ohne eine einzige Konfigurationszeile.

Das funktioniert nicht nur für Next.js. Vercel unterstützt offiziell über 30 Frameworks: React (Vite, CRA), Vue.js, Nuxt, SvelteKit, Astro, Gatsby, Remix und mehr. Das Build-System erkennt das Framework am package.json und konfiguriert sich entsprechend.

Was Vercel besonders macht:

• Globales Edge-Netzwerk: Statische Assets werden automatisch über alle Vercel-Rechenzentren verteilt — ohne CDN-Konfiguration.
• Preview Deployments: Jeder Pull Request bekommt automatisch eine eigene Preview-URL mit der vollständigen Applikation.
• Serverless und Edge Functions: API-Endpunkte laufen als autoscalende Functions ohne Server-Management.
• Automatische SSL-Zertifikate: HTTPS für alle Domains, inklusive Custom Domains, ohne manuellen Setup.

2. Die Vercel CLI: Deployment aus dem Terminal

Die Vercel CLI ist das Werkzeug für alle, die ihr Deployment aus dem Terminal steuern möchten — statt ausschließlich über das Dashboard. Claude Code versteht die CLI vollständig und kann sowohl Befehle vorschlagen als auch erklären, was dabei passiert.

npm install -g vercel
vercel login

Die drei wichtigsten CLI-Befehle:

# Lokale Entwicklungsumgebung mit Vercel-Konfiguration
vercel dev

# Deployment in Preview-Environment (kein Production-Push)
vercel

# Deployment direkt in Production
vercel --prod

vercel dev ist dabei mehr als ein lokaler Dev-Server: Es simuliert die Vercel-Runtime lokal, inklusive Serverless Functions, Rewrites und Headers aus vercel.json. Was lokal mit vercel dev läuft, läuft auf Vercel identisch — ohne Überraschungen beim Deployment.

Environment Variables über die CLI verwalten

# Environment Variable für alle Stages setzen
vercel env add DATABASE_URL

# Variable nur für Production setzen
vercel env add STRIPE_SECRET_KEY production

# Alle gesetzten Variables auflisten
vercel env ls

# Variables lokal pullen (für vercel dev)
vercel env pull .env.local

3. vercel.json: Konfiguration die Claude Code schreibt

vercel.json ist die zentrale Konfigurationsdatei für alles, was Vercel nicht automatisch erkennt: Rewrites, Redirects, benutzerdefinierte Headers, Function-Konfiguration und Build-Overrides. Diese Datei ist mächtig, aber ihre Syntax ist nicht immer intuitiv.

Claude Code kann vercel.json nicht nur erklären, sondern für konkrete Anwendungsfälle schreiben. Ein typisches Beispiel für eine Next.js-App mit API-Proxy:

{
  "rewrites": [
    {
      "source": "/api/external/:path*",
      "destination": "https://api.example.com/:path*"
    }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ],
  "functions": {
    "api/heavy-computation.js": {
      "maxDuration": 30,
      "memory": 1024
    }
  }
}

Der Anwendungsfall für Claude Code: Beschreibe dein Routing-Problem oder deine Anforderung, und erhält eine fertige vercel.json mit Erklärung jeder Option. Keine Trial-and-Error-Runden mit der Dokumentation.

Redirects und Rewrites

Redirects für Legacy-URLs, Rewrites für API-Proxys, Trailing-Slash-Konfiguration — alles landet in vercel.json. Claude Code versteht den Unterschied zwischen einem Rewrite (URL bleibt gleich, Inhalt wechselt) und einem Redirect (URL ändert sich), und wählt die richtige Option für den jeweiligen Anwendungsfall.

{
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "permanent": true
    }
  ]
}

4. Preview Deployments: Pull Requests testen wie Production

Eines der stärksten Features von Vercel: Jeder Pull Request bekommt automatisch eine eigene Preview-URL mit der vollständigen Applikation. Kein manuelles Deployment, keine Test-Server-Verwaltung — die Preview-URL steht innerhalb von Sekunden nach dem Push bereit.

Das ändert den Review-Prozess grundlegend. Statt einem Reviewer zu erklären, wie er die Änderungen lokal aufsetzen soll, teilt man die Preview-URL. Der Reviewer kann die Änderungen im Browser prüfen, ohne etwas installieren oder konfigurieren zu müssen.

Preview Deployments haben eigene Environment-Variablen: Im Vercel-Dashboard kann man Variables spezifisch für Preview, Development oder Production setzen. Ein Feature-Branch der gegen eine Staging-Datenbank testen soll, bekommt automatisch die richtigen Variablen — ohne den Production-State zu berühren.

5. Edge Functions und Serverless Functions

Vercel bietet zwei Arten von serverseitigem Code: Serverless Functions für klassische Node.js-API-Endpunkte und Edge Functions für ultraschnelle Middleware und Request-Verarbeitung nahe beim Nutzer.

Serverless Functions

Jede Datei im api/-Verzeichnis (oder bei Next.js in pages/api/ bzw. app/api/) wird automatisch zu einer Serverless Function. Kein Setup, kein Server-Management:

// api/send-email.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const apiKey = process.env.EMAIL_API_KEY;
  // ... API-Aufruf mit apiKey
  res.status(200).json({ success: true });
}

Der entscheidende Punkt: process.env.EMAIL_API_KEY kommt aus dem Vercel-Dashboard — niemals als Literal im Code. Claude Code hält diese Konvention automatisch ein und erklärt beim Schreiben von Functions, welche Variablen im Dashboard gesetzt werden müssen.

Edge Functions: Middleware nahe beim Nutzer

Edge Functions laufen nicht in einem klassischen Node.js-Environment, sondern auf Vercels Edge-Netzwerk — wenige Millisekunden vom Nutzer entfernt. Sie eignen sich für Authentication, A/B-Testing, Geo-Redirects und alles, was minimale Latenz erfordert:

// middleware.js (Next.js)
import { NextResponse } from 'next/server';

export function middleware(request) {
  const country = request.geo?.country || 'DE';

  if (country === 'US') {
    return NextResponse.redirect(new URL('/en', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/((?!api|_next|favicon.ico).*)',
};

Claude Code versteht den Unterschied zwischen Edge Runtime und Node.js Runtime: Edge Functions dürfen kein fs-Modul nutzen, unterstützen keinen nativen Node.js-Code und haben ein kleineres API. Bei der Implementierung weist Claude Code automatisch auf diese Einschränkungen hin und schlägt Edge-kompatible Alternativen vor.

6. Custom Domains und SSL-Zertifikate

Vercel verwaltet SSL-Zertifikate vollautomatisch — auch für Custom Domains. Das Setup beschränkt sich auf zwei Schritte: Domain im Vercel-Dashboard hinzufügen, DNS-Eintrag beim Domain-Provider setzen. Vercel erkennt den Eintrag, stellt ein Let's-Encrypt-Zertifikat aus und erneuert es automatisch.

# Domain über CLI hinzufügen
vercel domains add meine-domain.de

# DNS-Konfiguration prüfen
vercel domains inspect meine-domain.de

Für Apex-Domains (ohne www) empfiehlt Vercel einen A-Record statt eines CNAME. Claude Code kennt diese DNS-Eigenheiten und kann erklären, welcher Record-Typ für welche Domain-Konfiguration richtig ist.

7. Wie Claude Code beim Vercel-Workflow hilft

Der größte Zeitgewinn entsteht nicht beim Deployment selbst — das ist schnell. Er entsteht bei der Konfiguration und beim Debugging von Deployment-Fehlern. Claude Code greift dabei auf drei Ebenen:

vercel.json generieren: Beschreibe dein Routing-Ziel, und Claude Code schreibt die vercel.json mit korrekter Syntax, erklärt jeden Abschnitt und weist auf mögliche Konflikte hin (z.B. Rewrites die Redirects überschreiben).

Build-Fehler analysieren: Deployment schлägt fehl? Build-Log in Claude Code einfügen und fragen, was die Ursache ist. Claude Code liest den Log, findet den primären Fehler, trennt ihn von Folgefehlern und zeigt den Fix.

vercel --prod 2>&1 | claude "Was ist der Build-Fehler und wie behebe ich ihn?"

Environment-Setup dokumentieren: Claude Code kann aus dem Projektcode ableiten, welche Environment-Variablen benötigt werden, und eine strukturierte Liste für das Onboarding neuer Entwickler erstellen — welche Variables für Development, welche für Production, wo sie herzukommen haben.

• Claude Code Debugging — Build-Fehler und Laufzeitprobleme systematisch analysieren
• Claude Code für Unternehmen — Team-Workflows, Zugriffskontrolle und CI/CD auf Unternehmensebene