Eine Next.js-App mit Claude, Vercel und Supabase bauen und deployen

Ein praxisnaher Leitfaden zur Einrichtung von Terminal, VS Code, GitHub, Claude Code, Vercel und Supabase — von einem einfachen Blog mit CMS bis zu einer vollständigen Table-Management-App. Dieser Leitfaden führt Sie durch jedes Tool mit echten KI-Prompts, die Sie sofort verwenden können.

Tool	Role	Free Tier
⌨️ Terminal	Local dev environment — shell, Node.js, Git, package manager	✓ Always free
VS Code	Editor + AI integration — extensions, workspace config, inline completions	✓ Always free
GitHub	Source control + CI/CD — branches, PRs, Actions workflows	✓ Unlimited public repos
Claude Code	AI pair programmer — reads your codebase, writes files, runs commands	✓ Free tier available
Supabase	DB + Auth + Storage — Postgres, Row Level Security, Realtime	✓ 2 projects, 500MB DB
Vercel	Hosting + CDN — auto-deploy on push, edge functions, preview URLs	✓ 100GB bandwidth/mo
Cloudflare	Edge hosting + CDN — Pages for static/SSR, Workers for serverless logic	✓ Unlimited requests
✦Penpot	UI design tool — open-source Figma alternative, design-to-code	✓ Always free
✦CodeSandbox	Cloud dev environment — open any GitHub repo instantly, no local setup	✓ Free personal use

✦ Penpot: Design vor dem Bauen

Bevor Sie eine einzige Zeile Code schreiben, skizzieren Sie Ihre UI in Penpot — der Open-Source-, browserbasierten Figma-Alternative, die komplett kostenlos ist. Layouts und Komponentenstruktur zuerst zu klären, spart später Stunden an Refactoring.

01 — GitHub: Versionskontrolle & CI/CD

GitHub ist der Ort, an dem Ihr Code lebt, wo Teammitglieder zusammenarbeiten und wo Deployments ausgelöst werden. Ihr Repository von Anfang an richtig zu konfigurieren, erspart später Kopfschmerzen.

# Authenticate, create repo, and push
gh auth login
git init && git add . && git commit -m "init"
gh repo create my-blog --public --source=. --push

# Force a redeploy on Vercel without a code change
git commit --allow-empty -m "redeploy"
git push

brew install glab          # macOS
sudo apt install glab -y   # Ubuntu / WSL2

glab auth login
glab repo create my-blog --public
git remote set-url origin https://gitlab.com/yourname/my-blog.git
git push -u origin main

02 — Terminal & Claude Code

Alles beginnt mit einem guten Terminal-Setup. Shell, Node.js und Git einzurichten dauert etwa 10 Minuten — und bereitet Sie auf alles vor, was folgt.

# macOS — Install Homebrew, then essentials
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node git gh
npm install -g pnpm

# Windows — Install WSL2 (run in PowerShell as Administrator)
wsl --install
# After restart, open Ubuntu and run:
sudo apt update && sudo apt install nodejs npm git -y
npm install -g pnpm gh

# Verify installs
node --version && git --version && gh --version

# Clone an existing repo to a new machine
git clone https://github.com/yourname/my-blog.git
cd my-blog && pnpm install

Claude Code ist ein terminal-nativer KI-Agent, der Ihre gesamte Codebasis liest, Dateien schreibt, Befehle ausführt und iteriert, bis das Feature funktioniert. Er ist der Multiplikator, der einen einzelnen Entwickler wie ein ganzes Team wirken lässt.

npm install -g @anthropic-ai/claude-code
cd my-blog && claude

✦ VS Code: Ihr Editor

VS Code ist mehr als ein Texteditor — mit den richtigen Erweiterungen und Einstellungen wird es zu einer IDE, die Ihre gesamte Codebasis versteht. Der Schlüssel ist, es einmal richtig zu konfigurieren.

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension anthropics.claude-code
code --install-extension rangav.vscode-thunder-client
code --install-extension eamodio.gitlens

Wesentliche Erweiterungen:

• Hybrid AI — Hugging Face und Claude — betreiben Sie einen selbstgehosteten Hugging-Face-Agenten für Audits, Dokumentation, Recherche, Reviews, PRs und Pläne, während Claude Code für Refactorings, Bugs und Migrationen reserviert bleibt. Enthält Claude-Code-Prompts für jeden Arbeitsbereich und einen Kostenvergleich, der zeigt, wie viel Sie sparen.
• Prettier + ESLint — Code automatisch sauber halten. Prettier formatiert beim Speichern, ESLint findet Bugs, bevor sie Ihre Teammitglieder erreichen.
• Thunder Client — testen Sie Ihre API-Routen, ohne den Editor zu verlassen. Eine leichtgewichtige Postman-Alternative, direkt eingebaut.
• GitLens — verstehen Sie die Historie jeder Zeile auf einen Blick. Fahren Sie über eine beliebige Zeile, um zu sehen, wer sie geschrieben hat, wann und warum.

03 — Vercel: In 30 Sekunden deployen

Vercel ist die Heimat von Next.js und der schnellste Weg, Ihre App live zu bringen. Verbinden Sie Ihr GitHub-Repo einmal, und jeder Push nach main deployt automatisch.

npm install -g vercel && vercel
# Or connect GitHub at vercel.com/new — 3 clicks

Gehen Sie nach dem Deployment zurück zu Supabase → Authentication → URL Configuration und fügen Sie Ihre Live-Vercel-URL zur Redirect-URLs-Liste hinzu.

✦ Cloudflare Pages: Die Vercel-Alternative

Cloudflare Pages ist eine überzeugende Alternative zu Vercel — besonders wenn Sie globale Edge-Auslieferung, keine Cold Starts und keine Bandbreitenobergrenzen wollen. Es verbindet sich mit GitHub genau wie Vercel und deployt automatisch bei jedem Push nach main. Der wesentliche Unterschied: Ihre App läuft im Edge-Netzwerk von Cloudflare an über 300 Standorten statt in einer Handvoll Serverless-Regionen.

# Install the adapter for Next.js on Cloudflare
npm install --save-dev @cloudflare/next-on-pages

# Add the build script to package.json
# "build:cf": "next build && npx vercel-build"

# Deploy via CLI
npx wrangler pages deploy .vercel/output/static
# Or connect GitHub at pages.cloudflare.com — same 3-click flow as Vercel

04 — Supabase: Ihr Backend in der Box

Supabase gibt Ihnen Postgres, Authentifizierung, Dateispeicher und Echtzeit-Subscriptions — alles mit automatisch generierten TypeScript-Typen und einer großzügigen kostenlosen Stufe.

brew install supabase/tap/supabase
pnpm add @supabase/supabase-js @supabase/ssr
supabase gen types typescript --project-id YOUR_ID > types/database.ts

Checkliste für die Auth-Einrichtung:

• E-Mail-Auth ist aktiviert — unter Providers → Email bestätigen.
• Site URL ist gesetzt — gehen Sie zu Authentication → URL Configuration und setzen Sie Ihre Produktionsdomain.
• Redirect-URLs sind konfiguriert — fügen Sie sowohl http://localhost:3000/** als auch Ihre Vercel-URL zur Redirect-URLs-Liste hinzu. Ohne dies werden Magic Links blockiert.
• API-Keys sind in Vercel — kopieren Sie NEXT_PUBLIC_SUPABASE_URL und NEXT_PUBLIC_SUPABASE_ANON_KEY aus Project Settings → API und fügen Sie sie dann zu den Vercel Environment Variables hinzu.

✦ CodeSandbox: Code von überall

Mit CodeSandbox können Sie jedes GitHub-Repo in einer vollständigen Cloud-Entwicklungsumgebung öffnen — kein lokales Setup nötig. Perfekt für schnelle Änderungen unterwegs, das Onboarding von Mitwirkenden oder das Testen eines Branches auf einer Maschine ohne Ihre Entwicklungsumgebung.

Stellen Sie einfach jeder GitHub-URL codesandbox.io/p/github/ voran, und Ihr Repo öffnet sich in einem VS-Code-ähnlichen Editor mit laufendem Dev-Server, Terminal-Zugriff und integrierter Vercel-Preview-Integration.

# Open any GitHub repo in CodeSandbox instantly:
# https://codesandbox.io/p/github/yourname/my-blog

# Or install the browser extension to add an
# "Open in CodeSandbox" button on every GitHub repo page

# Devboxes persist your environment — install deps once,
# resume your session later exactly where you left off

Wenn Sie nach einer fertigen App suchen, die genau auf diesem Stack aufgebaut ist: Open Technology App ist eine Task-Queue- und Workflow-Management-Plattform, selbstgehostet auf Vercel und Supabase — kostenlos zum Starten.