Glossar

Jeder Fachbegriff aus dem Tutorial – in normaler Sprache erklärt. Im Text sind diese Wörter gestrichelt unterstrichen und lassen sich anklicken.

Router & Dateien

App Router: Die heutige Art, in Next.js Seiten anzulegen: Ordner im Verzeichnis `app/` werden zu Adressen, und eine `page.tsx` darin ist die Seite. Löst den älteren Pages Router ab. Nur hier gibt es Server-Komponenten, Layouts mit Zustand und Streaming.
Dynamisches Segment: Ein Ordner in eckigen Klammern, `[slug]`, der für jeden beliebigen Wert an dieser Stelle steht. `[...alles]` fängt beliebig viele Stufen ab, `[[...alles]]` zusätzlich auch den leeren Fall.
error.tsx: Fängt Fehler aus dem Bereich darunter ab und zeigt stattdessen etwas Lesbares. Muss eine Client-Komponente sein.
Intercepting Routes: Eine Adresse abfangen und anders darstellen – etwa ein Foto als Overlay statt als eigene Seite, solange man von der Liste kommt.
layout.tsx: Rahmen um alles darunter – Kopfzeile, Navigation, Seitenleiste. Bleibt beim Navigieren stehen und verliert seinen Zustand nicht.
loading.tsx: Die Anzeige, die Next.js zeigt, solange die Seite darunter noch lädt. Im Hintergrund ist das ein Suspense-Bereich.
Middleware: Code, der vor jeder passenden Anfrage läuft – für Weiterleitungen, Sprachen oder Zugriffsschutz. Läuft in einer eingeschränkten Umgebung: kein Datenbankzugriff, keine Node-Module.
not-found.tsx: Wird gezeigt, wenn eine Adresse nicht existiert oder der Code `notFound()` aufruft.
page.tsx: Die Datei, die den Inhalt einer Adresse ausmacht. Ohne sie ist der Ordner keine aufrufbare Seite.
Pages Router: Die ältere Art mit dem Verzeichnis `pages/`. Funktioniert weiter, bekommt aber keine neuen Fähigkeiten mehr.
Parallel Routes: Mehrere Bereiche einer Seite, die gleichzeitig und unabhängig voneinander gefüllt werden. Ordner beginnen mit `@`.
Route Handler: Eine `route.ts`, die auf eine Adresse antwortet, ohne eine Seite zu sein – der Weg zu einer eigenen API.
Route-Gruppe: Ein Ordner in runden Klammern, `(marketing)`, der nur zum Sortieren dient und nicht in der Adresse auftaucht.
Route-Segment: Ein Ordner in `app/`, der einem Stück der Adresse entspricht: `app/blog/[slug]` deckt `/blog/mein-artikel` ab.
template.tsx: Wie ein Layout, wird aber bei jeder Navigation neu aufgebaut. Für Dinge, die jedes Mal von vorn beginnen sollen – etwa eine Einblend-Animation.

Rendern & Ausliefern

"use client": Die Zeile ganz oben in einer Datei, die sagt: ab hier läuft alles im Browser. Sie gilt für die Datei und alles, was sie importiert – deshalb setzt man sie so tief wie möglich im Baum.
"use server": Markiert eine Funktion als Server Action: Der Browser darf sie aufrufen, ausgeführt wird sie auf dem Server.
Client-Grenze: Die Stelle, an der eine Server-Komponente eine Client-Komponente einbindet. Ab dort wandert alles ins Browser-Bundle.
Client-Komponente: Eine Komponente, die im Browser läuft und deshalb State, Hooks und Klicks kann. Erkennbar an `"use client"` oben in der Datei.
Dynamisches Rendern: Die Seite wird bei jeder Anfrage neu erzeugt. Nötig, sobald sie von Cookies, Kopfzeilen oder Suchparametern abhängt.
Hydration: Der Moment, in dem React das vom Server gelieferte HTML im Browser übernimmt und Klicks funktionieren.
ISR: Statische Seite mit Verfallsdatum: Nach der eingestellten Zeit erzeugt Next.js sie im Hintergrund neu. Ausgeschrieben Incremental Static Regeneration. Eingestellt über `revalidate`.
Partial Prerendering: Statische Hülle sofort ausliefern und die dynamischen Löcher darin nachströmen lassen – beides auf einer Seite.
RSC-Payload: Das Datenformat, in dem der Server das Ergebnis seiner Komponenten an den Browser schickt – kein HTML, sondern eine Beschreibung.
Server Action: Eine Funktion, die auf dem Server läuft und die du direkt aus einem Formular oder einem Klick aufrufen kannst – ohne eine API dazwischen.
Server-Komponente: Eine Komponente, die nur auf dem Server läuft. Sie darf direkt Daten holen, aber keine Klicks verarbeiten und keine Hooks benutzen. Im App Router ist das der Normalfall – du musst nichts dafür tun.
Statisches Rendern: Die Seite wird schon beim Bauen erzeugt und danach für alle gleich ausgeliefert. Schnell und billig – der Standard, wo möglich.
Streaming: Die Seite wird stückweise geschickt: Was fertig ist, sieht der Nutzer sofort, langsame Teile kommen nach.
Suspense: Ein Bereich, der eine Zwischenanzeige zeigt, solange etwas darin noch nicht fertig ist – die Grundlage fürs Streaming.

Daten & Caching

Data Cache: Next.js merkt sich Antworten von `fetch` über Anfragen und Deploys hinweg, bis du sie für ungültig erklärst.
Datenholen im Server: In einer Server-Komponente schreibst du `const daten = await fetch(...)` direkt in die Komponente – kein useEffect, kein Ladezustand.
Dynamische Funktionen: `cookies()`, `headers()` und `searchParams`. Sobald du eine benutzt, kann die Seite nicht mehr statisch sein.
Full Route Cache: Das fertig gerenderte HTML einer statischen Seite, das beim Bauen entsteht und danach direkt ausgeliefert wird.
generateStaticParams: Sagt Next.js beim Bauen, welche konkreten Werte ein dynamisches Segment annehmen soll – damit daraus statische Seiten werden.
Request Memoization: Derselbe `fetch` mehrfach in einem Seitenaufbau wird nur einmal wirklich ausgeführt.
revalidate: Die Angabe, nach wie vielen Sekunden zwischengespeicherte Daten als veraltet gelten.
revalidatePath / revalidateTag: Gezieltes Für-ungültig-Erklären: nach dem Speichern genau die Seiten oder Daten neu holen lassen, die betroffen sind.
Router Cache: Der Zwischenspeicher im Browser: Beim Zurücknavigieren zeigt Next.js die Seite sofort aus dem Speicher.
server-only: Ein kleines Paket, das den Build abbricht, falls eine Datei versehentlich im Browser landet. Schutz für Code mit Geheimnissen.
Wasserfall: Zwei Ladevorgänge, die nacheinander laufen, obwohl sie nebeneinander laufen könnten – die häufigste Bremse.

Drumherum

Draft Mode: Ein Schalter, der statische Seiten vorübergehend dynamisch macht – damit Redakteure Entwürfe sehen können.
Edge Runtime: Eine schlanke Ausführungsumgebung nah am Nutzer. Schnell zu starten, kann aber weniger als Node.
generateMetadata: Die Funktion, mit der du Titel und Beschreibung aus geladenen Daten berechnest – etwa den Artikelnamen aus der Datenbank.
Metadata: Titel, Beschreibung und Vorschaubild einer Seite – als exportiertes Objekt oder als Funktion, die sie berechnet.
next/font: Lädt Schriften beim Bauen mit aus und legt sie neben deinen Code – kein Nachladen von Google, kein Textsprung.
next/image: Die Bildkomponente, die Größe, Format und Ladeverhalten selbst regelt und damit den größten Teil der Ladezeit spart.
next/link: Interner Verweis, der die Zielseite im Hintergrund vorlädt, sobald der Verweis sichtbar wird.
Turbopack: Der Bündler, den Next.js inzwischen standardmäßig benutzt – deutlich schneller als der alte Weg.
Umgebungsvariablen: Werte aus `.env`. Nur was mit `NEXT_PUBLIC_` beginnt, landet im Browser – alles andere bleibt auf dem Server.

Hirefullstack

Ihr braucht React-Verstärkung im Team?

Wir bauen seit Jahren React- und Next.js-Anwendungen für Kunden in ganz Deutschland – als einzelner Experte, als Verstärkung fürs Bestandsteam oder als komplettes Scrum-Team.

Projekt besprechen →