Was ist Next.js? Eine verständliche Anleitung für App-Bauer

Next.js ist ein Framework, um Websites und Web-Apps mit React zu bauen. React liefert dir die Bausteine einer Oberfläche, etwa Schaltflächen, Formulare und Listen. Next.js ergänzt die übrige Website drumherum: Seiten und URLs, Rendering der Seiten auf dem Server, damit sie fertig ankommen, das Laden von Daten und das Ausführen von Backend-Code im selben Projekt. Es ist Open Source, stammt vom Unternehmen Vercel und ist eine der meistgenutzten Arten, React-Websites zu bauen.

Warum Next.js beim Bauen mit KI wichtig ist

Wenn du einer KI deine App beschreibst, muss der Builder eine technische Grundlage wählen. Diese Wahl prägt, was dir später wichtig ist:

• Sichtbarkeit in Suchmaschinen. Eine öffentliche Website, die bei Google gefunden werden soll, profitiert davon, echtes HTML auszuliefern, und genau das kann Next.js gut.
• Wo das Backend lebt. Next.js erlaubt, Seiten und Server-Code, etwa „dieses Formular speichern“ oder „die Zahlungs-API aufrufen“, im selben Projekt zu halten.
• Hosting. Eine Next.js-App mit Serverfunktionen braucht einen Server, auf dem sie läuft. Eine reine Vite-App lässt sich dagegen als statische Dateien ausliefern.

Mythex startet neue Projekte standardmäßig mit Vite + React + TypeScript + Tailwind und nutzt Next.js, wenn du es verlangst. Es reicht, „Use Next.js“ in deinem ersten Prompt zu schreiben (wie die Technik gewählt wird). Deshalb lohnt es sich zu wissen, wann sich die Nachfrage lohnt.

Ein Alltagsvergleich

Wenn React eine Kiste mit hochwertigen Lego-Steinen ist, dann ist Next.js ein Lego-Set, bei dem Anleitung, Grundplatte und die Teile für Türen und Leitungen schon dabei sind.

Du könntest dasselbe Haus aus losen Steinen bauen, müsstest aber selbst entscheiden, wie die Räume verbunden sind, wo die Haustür liegt und wie das Wasser hineinkommt. Next.js trifft diese Entscheidungen auf standardisierte Weise für dich. Deshalb ist jedes Next.js-Projekt ähnlich aufgebaut, und sowohl ein neuer Entwickler als auch eine KI finden sich schnell zurecht.

Was Next.js zu React ergänzt

Next.js kennt zwei Arten, Seiten zu organisieren. Der App Router (der Ordner app/) ist der neuere und unterstützt Server Components. Der Pages Router (der Ordner pages/) ist der ursprüngliche und wird weiterhin unterstützt. Neue Projekte nutzen in der Regel den App Router. Wenn dir der Code deines KI-Builders oder eines Tutorials fremd vorkommt, liegt es oft daran.

Ein Beispiel: ein öffentliches Verzeichnis lokaler Cafés

Stell dir eine Website vor, die Cafés in deiner Stadt auflistet, mit einer Seite pro Café, die in Suchergebnissen erscheinen soll.

Eine Next.js-Seite für ein Café könnte ungefähr so aussehen:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Was passiert, wenn jemand (oder Google) /cafes/blue-door aufruft:

1. Next.js ordnet die URL dieser Datei zu. Der Ordner [slug] bedeutet „jedes beliebige Café“.
2. Die Komponente läuft auf dem Server, liest das Café aus der Datenbank und baut das HTML.
3. Der Browser erhält eine vollständige Seite mit Name und Adresse des Cafés bereits darin, ohne dass er auf JavaScript warten muss, um Daten nachzuladen.

Bei einer reinen clientseitigen React-App bekäme der Browser zuerst eine nahezu leere Seite, dann lädt er JavaScript, dann holt er das Café, und dann zeigt er es an. Suchmaschinen kommen damit oft zurecht, aber eine fertig aufgebaute Seite ist zuverlässiger. Siehe SEO für mit KI gebaute Websites.

Zum Vergleich: Ein Dashboard für Mitarbeitende hinter einem Login kann ohnehin niemand in Suchmaschinen sehen. Server-Rendering bringt dort wenig, und eine einfachere Vite-App passt meist besser.

Wichtige Begriffe

Häufige Missverständnisse

• „Next.js ersetzt React.“ Das stimmt nicht. Es nutzt React. Deine Komponenten sind weiterhin React-Komponenten.
• „Next.js ist immer die bessere Wahl.“ Es ist leistungsfähiger und hat auch mehr, das man verstehen muss. Server-Rendering, Caching und der Unterschied zwischen Server- und Client-Code sind häufige Quellen verwirrender Fehler. Für eine App, die hauptsächlich hinter einem Login liegt, ist eine reine React-App oft einfacher.
• „Next.js läuft nur auf Vercel.“ Es ist Open Source und läuft auf jedem Node.js-Server oder in einem Docker-Container. Ein vollständig statischer Export ist möglich, wenn du keine Serverfunktionen nutzt.
• „Next.js garantiert gutes SEO.“ Es macht lesbare Seiten leichter. Rankings hängen weiterhin von Titeln, Inhalten, Geschwindigkeit und Links ab.
• „Server-Code in Next.js ist automatisch privat.“ Code, der für den Client markiert ist, landet im Browser. Geheimnisse müssen im reinen Server-Code und in Umgebungsvariablen bleiben.

Was du deinen KI-Builder fragen solltest

• „Verwende Next.js mit dem App Router“, im ersten Prompt, falls du das willst.
• „Welche Seiten werden auf dem Server gerendert, welche sind statisch und welche laufen im Browser, und warum?“
• „Mache die öffentlichen Marketing- und Verzeichnisseiten serverseitig gerendert oder statisch, mit sauberen Titeln und Beschreibungen.“
• „Halte API-Schlüssel im reinen Server-Code und in Umgebungsvariablen. Zeig mir, wo jeder davon gelesen wird.“
• „Braucht diese App Next.js, oder wäre eine Vite-und-React-App für das, was wir bauen, einfacher?“

Next.js in Mythex

Mythex nutzt standardmäßig Vite + React + TypeScript + Tailwind und wechselt zu Next.js, wenn du es in deinem Prompt verlangst. Wenn du es früh nennst, sparst du Credits gegenüber einem späteren Wechsel. Du siehst die App in der Live-Vorschau, und mit Veröffentlichen geht sie auf eine Live-URL, ohne dass du selbst Hosting einrichten musst. Die Dokumentation von Mythex weist darauf hin, dass clientseitig gerenderte Single-Page-Apps schwächeres SEO haben als serverseitig gerenderte oder statische HTML-Seiten. Wenn bei einer Marketing-Website Suchmaschinen wichtig sind, solltest du das deshalb von Anfang an sagen (SEO für deine App).

Fragen