Next.js Konzepte: Checkliste für Vibe Coders

Claude, Cursor und Copilot schlagen dir Next.js vor weil ihre Trainingsdaten voll davon sind, nicht weil dein Projekt es braucht. Aber wenn du dich bewusst für Next.js entscheidest, musst du diese 12 Konzepte kennen. Sonst arbeitest du mit einem Tool, das du nicht verstehst. Der Vanilla vs. Next.js Vergleich zeigt wann welcher Stack passt.

Frequently Asked Prompts Entscheidungshilfe

Ich baue [Projektbeschreibung]. Brauche ich Next.js oder reicht Vanilla HTML/CSS/JS? Begründe mit konkreten technischen Argumenten, nicht mit Popularität.

Konzept erklären

Erkläre mir [Server Components / App Router / getStaticProps] in Next.js so dass ein Vibe Coder ohne React-Erfahrung es versteht. Mit einem Minimal-Beispiel.

Migration

Ich habe eine Next.js-Seite die eigentlich nur statisches HTML braucht. Zeige mir Schritt für Schritt wie ich sie zu Vanilla HTML/CSS/JS migriere.

React-Grundlagen (Voraussetzung für Next.js)

1. Components, Alles in React ist eine Funktion die HTML zurückgibt (JSX). Seiten bestehen aus verschachtelten Komponenten. Ohne dieses Konzept verstehst du nichts was Next.js generiert.
2. Props, Daten die von oben nach unten fließen. Eine Parent-Komponente gibt Werte an Child-Komponenten weiter. Jede KI-generierte Seite nutzt Props extensiv.
3. useState / useEffect, State verwaltet Daten die sich ändern (Formulare, Toggles, Counter). useEffect führt Code bei Mount oder Änderung aus. Die zwei Hooks die 90 Prozent aller React-Logik abdecken.
4. JSX ist kein HTML, In JSX heißt es className statt class, htmlFor statt for, und jedes Element muss geschlossen werden. Wenn du HTML kennst aber JSX-Fehler nicht findest, liegt es daran.

Next.js-spezifische Konzepte

1. App Router vs. Pages Router, Seit Next.js 13 gibt es zwei Routing-Systeme. App Router (app/ Ordner) ist der neue Standard mit Server Components. Pages Router (pages/) ist Legacy. Claude generiert meistens App Router, wenn du altes Tutorial-Wissen hast, kollidiert das.
2. Server Components vs. Client Components, Standard in Next.js 15: alles ist Server Component (läuft auf dem Server, kein JS im Browser). Für Interaktivität brauchst du "use client" am Dateianfang. Häufiger KI-Fehler: interaktive Elemente ohne "use client".
3. File-based Routing, Jede Datei in app/ wird automatisch eine Route. app/about/page.tsx wird /about. Kein React Router nötig. Einfach, aber wenn du die Konvention nicht kennst, findest du nichts.
4. SSR / SSG / ISR, Server-Side Rendering (jeder Request), Static Site Generation (Build-Time), Incremental Static Regeneration (Mischung). Für Content-Seiten: SSG. Für dynamische Daten: SSR oder ISR. Die meisten Vibe-Coder brauchen nur SSG, oder gleich Vanilla JS.
5. API Routes, Backend-Endpunkte direkt in deinem Next.js-Projekt: app/api/hello/route.ts. Das ist der Hauptgrund warum Next.js existiert: Frontend und Backend in einem Repo. Wenn du kein Backend brauchst, brauchst du kein Next.js.
6. node_modules und Build-Step, Next.js braucht npm install (~187 MB node_modules) und einen Build-Prozess (bis zu 5 Minuten). Das ist der fundamentale Unterschied zu Vanilla: Jede Änderung muss kompiliert werden bevor sie live geht. Vercel übernimmt das, aber du musst wissen dass es passiert.
7. Hydration, Next.js rendert HTML auf dem Server, dann lädt der Browser JavaScript um es interaktiv zu machen. Dieser Prozess heißt Hydration und kostet 42 KB+ React-Runtime. Wenn deine Seite ohne Interaktion auskommt: Hydration ist reiner Overhead.
8. next.config.js, Zentrale Konfigurationsdatei. Hier werden Redirects, Image-Domains, Environment-Variables und Build-Optionen definiert. Claude generiert sie oft falsch oder veraltet, immer gegenchecken.

Lernpfad: So lernst du Next.js Schritt für Schritt

Drei Stufen, vom React-Einstieg bis zum produktionsreifen Next.js-Projekt.

Basics (Woche 1) Next.js (Woche 2-3) Deployment (Woche 4)

React-Grundlagen zuerst

1. Components verstehen, Alles in React ist eine Funktion. Baue 5 einfache Komponenten: Button, Card, Header, Footer, Nav.

1. Props und State, Daten von oben nach unten (Props), veränderlicher Zustand (useState). Baue ein einfaches Counter-Beispiel.

1. useEffect, Code bei Mount oder Datenänderung ausführen. API-Calls und Event-Listener gehören hierher.

1. JSX-Eigenheiten, className statt class, htmlFor statt for. Jeden Fehler einmal gemacht haben ist besser als ihn nie zu machen.

Tipp: React ohne Framework zuerst lernen: Vite + React reicht für die Basics. Kein Next.js-Overhead, keine Verwirrung durch Server Components.

Next.js-spezifische Konzepte

1. App Router vs. Pages Router, Lerne den App Router (app/ Ordner). Pages Router ist Legacy, Claude generiert meistens App Router.

1. Server vs. Client Components, Standard: alles Server Component. Für Interaktivität: „use client" am Dateianfang. Das ist der häufigste Fehler bei KI-generiertem Code.

1. File-based Routing, Jede page.tsx in app/ wird automatisch eine Route. Lege 3 Routen an und navigiere zwischen ihnen.

1. SSG für Content, Statische Inhalte mit generateStaticParams. Für Landing Pages und Blogs ist das die richtige Wahl.

Checkpoint: Kannst du den Unterschied zwischen Server und Client Component erklären? Kannst du eine API Route erstellen? Wenn ja, bist du bereit für Deployment.

Deployment und Produktion

1. Vercel verbinden, GitHub-Repo verknüpfen, Auto-Deploy auf main konfigurieren. Preview-Deployments für jeden Branch.

1. Environment Variables, Secrets niemals im Code. Vercel Dashboard → Settings → Environment Variables.

1. next.config.js verstehen, Redirects, Image-Domains, Output-Mode. Claude generiert sie oft falsch, immer gegen aktuelle Docs prüfen.

1. Lighthouse Score prüfen, Next.js hat Overhead. Prüfe ob dein Score den Complexity-Aufwand rechtfertigt. Unter 90: Framework hinterfragen.

Ehrliche Frage: Braucht dein Projekt Next.js, oder hättest du mit Vanilla HTML/CSS/JS schneller dasselbe Ergebnis mit besserem Lighthouse-Score erreicht?

Zum Thema: Web Dev for Vibe Coders, Der komplette Guide 2026

Quellen

• nextjs.org/docs, Offizielle Next.js Dokumentation
• react.dev, Offizielle React Dokumentation