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
React-Grundlagen (Voraussetzung für Next.js)
- 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.
- 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.
- 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.
- 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
- 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.
- 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".
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Ehrliche Einordnung
Wenn du weniger als 8 dieser 12 Konzepte erklären kannst, ist Next.js für dein Projekt wahrscheinlich Overkill. Für Landing Pages, Blogs und Portfolios ist Vanilla JS die bessere Wahl — weniger Konzepte, weniger Fehlerquellen, bessere Performance.
Häufige Fragen
Sollte ich erst React lernen oder direkt Next.js?
Erst React-Grundlagen (Components, Props, Hooks), dann Next.js. Ohne React-Verständnis ist Next.js eine Blackbox. Für Vibe Coding reichen 2-3 Tage React-Basics.
Kann ich Next.js nur für statische Seiten nutzen?
Ja, mit Static Export (output: 'export' in next.config.js). Aber dann nutzt du ein 421-KB-Framework für etwas das 18 KB Vanilla JS erledigt. Es ist wie ein LKW zum Brötkchen-Holen.
Warum empfiehlt Claude ständig Next.js?
Weil die Trainingsdaten überproportional viel React/Next.js-Code enthalten. Das ist eine statistische Tendenz, keine technische Empfehlung. Expliziter Constraint im Prompt: "Vanilla HTML/CSS/JS, kein Framework" löst das Problem.
Zum Thema: Web Dev for Vibe Coders — Der komplette Guide 2026
Quellen
nextjs.org/docs — Offizielle Next.js Dokumentation
react.dev — Offizielle React Dokumentation