Dein erstes Hello World mit Claude Code

Genug Theorie. In dieser Lektion baust du das erste Mini-Feature mit Claude Code als Co-Pilot — vom leeren Ordner bis zum ersten Commit auf GitHub. Wenn du das durchhast, sitzt der Workflow.

Schritt 1: Neues Projekt anlegen

cd ~/dev
npx create-next-app@latest hello-ai-coding \
  --typescript --tailwind --app --src-dir --import-alias "@/*" \
  --eslint --turbopack
cd hello-ai-coding

Was passiert hier? create-next-app lädt die Next.js-Vorlage und richtet ein neues Projekt ein, mit TypeScript, Tailwind, App Router, dem @/*-Import-Alias, ESLint und Turbopack als Dev-Bundler. Die Optionen sind das Default-Setup für den Kurs.

Schritt 2: Dev-Server starten

npm run dev

Browser öffnen: http://localhost:3000. Du siehst die Next.js-Default-Seite. Lass den Dev-Server in dem Terminal laufen — er aktualisiert die Seite automatisch, wenn sich Code ändert.

Schritt 3: Claude Code starten

Öffne ein zweites Terminal-Fenster (oder einen Tab), wechsle in das Projekt-Verzeichnis und starte den CLI:

cd ~/dev/hello-ai-coding
claude

Der Claude-Code-Prompt erscheint. Du bist im Projekt-Kontext — Claude kann nun deine Files lesen und ändern.

Schritt 4: Erstes Feature prompten

Tippe in den Claude-Prompt:

Ersetze den Inhalt von src/app/page.tsx durch eine Startseite, die meinen Namen groß anzeigt und darunter eine Begrüßung, die abhängig von der Tageszeit lautet: vor 12 Uhr „Guten Morgen", vor 18 Uhr „Guten Tag", sonst „Guten Abend". Nutze die Systemzeit auf dem Server (Server Component). Verwende Tailwind für sauberes Zentrieren und eine angenehme Typographie. Keine Client-Komponenten nötig.

Claude Code antwortet mit einem Plan — was es vorhat, welche Datei es ändert. Bei Zustimmung zeigt es den Diff zwischen aktueller und vorgeschlagener Version. Du akzeptierst (oder lehnst ab und korrigierst).

Schritt 5: Ergebnis ansehen

Wechsle zurück in den Browser. Die Seite hat sich live aktualisiert (Hot Reload). Dein Name ist groß, darunter die zeitgesteuerte Begrüßung.

Falls die Begrüßung nicht passt: stelle deine System-Uhr testweise auf eine andere Uhrzeit, oder ändere den Code-Bereich, der die Stunde abruft, manuell.

Schritt 6: Build prüfen, bevor du committest

npm run build

Build muss grün sein. Falls rot: kopier den kompletten Error in den Claude-Prompt, schreib „Bitte fix das" — Claude liest die Stack-Trace und findet meistens in einem Anlauf den Bug.

Show → Do → Fix — der didaktische Dreiklang

Im Kurs nutzen wir konsistent diese drei Phasen:

Show (gerade gemacht): Ich zeige dir den Workflow Schritt für Schritt, du machst genau dasselbe nach.

Do (jetzt): Du erweiterst eigenständig. Bitte Claude Code: „Füge einen zweiten Absatz hinzu mit dem aktuellen Datum im Format ‚Montag, 21. April 2026'. Deutsche Locale." — Claude Code löst es; du schaust, ob die Lösung sauber ist.

Fix (gleich): Du baust absichtlich einen Fehler ein. Editiere src/app/page.tsx manuell und ersetze ein const durch cosnt (Typo). Speichere. Der Dev-Server zeigt einen Compile-Fehler. Kopier die Fehlermeldung in den Claude-Prompt: „Der Server zeigt einen Fehler, hier ist die Meldung: […]. Bitte fix das." — Claude diagnostiziert und behebt.

Das Muster — Vormachen, Nachmachen, kaputt machen, reparieren — ist der schnellste Weg, AI-Coding als Reflex aufzubauen.

Schritt 7: Committen und pushen

git add .
git commit -m "feat: initial hello world with time-dependent greeting"
git push

Falls noch kein Remote eingerichtet ist:

1. Repo auf https://github.com/new erstellen (privat reicht).

2. git remote add origin git@github.com:DEINNAME/hello-ai-coding.git
   git branch -M main
   git push -u origin main

   Kopieren