Wo läuft im App Router eine Komponente, an der nichts weiter steht?

Auf dem Server — Server ist der Standard. In den Browser wandert nur, was du ausdrücklich mit "use client" markierst – oder was von einer solchen Datei importiert wird.

Du legst den Ordner app/preise/ an. Die Adresse /preise ist aber nicht erreichbar. Woran liegt das?

Es fehlt eine page.tsx in dem Ordner. — Erst die page.tsx macht aus einem Ordner eine aufrufbare Adresse. Ordner ohne page.tsx sind nur Struktur – was man auch bewusst nutzt, um Dateien zu sortieren.

Was ist an dieser Server-Komponente bemerkenswert?

Sie darf async sein und direkt await benutzen. · Der Datenbankzugriff landet nie im Browser. · Es braucht kein useEffect und keinen Ladezustand. — Nur die letzte Aussage stimmt nicht: Klicks kann eine Server-Komponente nicht verarbeiten – dafür brauchst du eine Client-Komponente.

Eine Anleitung im Netz benutzt getServerSideProps. Was sagt dir das?

Sie beschreibt den älteren Pages Router und passt nicht zum App Router. — getServerSideProps und getStaticProps gehören zu pages/. Im App Router lädst du Daten direkt in der Komponente mit await.

Deine Seite zeigt lokal immer frische Daten, nach dem Deploy hängt sie fest. Was ist die wahrscheinlichste Erklärung?

Im Entwicklungsmodus ist kaum etwas zwischengespeichert, im Produktionsbau schon. — Das ist der Klassiker. Wer eine Caching-Frage untersucht, muss npm run build && npm run start benutzen – im Entwicklungsmodus sieht man das Verhalten schlicht nicht.

← Zur Übersicht

Einstieg 11 Min Lesezeit

Next.js von Null

Was Next.js dir abnimmt – und was sich dadurch ändert

In einem Satz

Next.js ist React plus alles, was drumherum nötig ist: Routing, Server, Bündeln, Bilder. Der wichtigste Unterschied: Deine Komponenten laufen jetzt standardmäßig auf dem Server.

Mit reinem React baust du eine Seite, die im Browser zusammengesetzt wird. Alles andere – welche Adresse zu welcher Ansicht gehört, wie Daten hereinkommen, wie das Ganze ausgeliefert wird – musst du selbst zusammenstellen.

Genau diese Teile bringt Next.js mit. Du bekommst Routing über Ordner, einen Server, der deine Komponenten ausführen kann, fertige Bild- und Schriftbehandlung und ein Deployment, das ohne Konfiguration funktioniert.

Tipp So liest du dieses Tutorial

Wörter mit gestrichelter Unterstreichung kannst du anklicken. Alles unter „Genauer erklärt“ ist beim ersten Durchgang überspringbar. Und wenn dir React selbst noch nicht sitzt: fang lieber beim React-Tutorial an.

Der eine Unterschied, der alles verändert

In reinem React läuft jede Komponente im Browser. Im App RouterDie 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.→ von Next.js ist es umgekehrt: Eine Komponente läuft standardmäßig auf dem Server und schickt nur ihr Ergebnis an den Browser.

app/page.tsx

// Läuft auf dem Server. Kein useEffect, kein Ladezustand.
export default async function Page() {
  const artikel = await db.artikel.findMany();   // direkter Datenzugriff

  return (
    <ul>
      {artikel.map((a) => (
        <li key={a.id}>{a.titel}</li>
      ))}
    </ul>
  );
}

Die Komponente ist async und darf await benutzen. Der Datenbankzugriff verlässt den Server nie.

Bildlich gesprochen

Reines React ist ein Bausatz, der beim Kunden ankommt – der Browser baut alles zusammen. Next.js ist ein fertig montiertes Möbelstück: Der Server stellt es zusammen und liefert es aus. Nur die Teile, die sich bewegen sollen, kommen als Bausatz mit.

Gut zu wissen Was das praktisch bringt

Weniger JavaScript im Browser, Daten ohne Umweg über eine API, und der Inhalt steht sofort im HTML – gut für Suchmaschinen und für den ersten Eindruck. Der Preis: Du musst dir überlegen, was wo läuft. Genau darum geht es in den nächsten Lektionen.

Ordner sind Adressen

struktur.txt

app/
  layout.tsx          Rahmen um alles
  page.tsx            /
  blog/
    page.tsx          /blog
    [slug]/
      page.tsx        /blog/mein-artikel
  ueber-uns/
    page.tsx          /ueber-uns

Kein Router einrichten, keine Liste von Adressen pflegen: Der Ordnerbaum ist die Navigation.

Stolperstein Ein Ordner allein ist noch keine Seite

Erst eine page.tsx darin macht die Adresse aufrufbar. Ein Ordner ohne page.tsx dient nur der Gliederung – praktisch, um Dateien zu sortieren, ohne eine Adresse zu erzeugen.

Die Dateien, die Next.js kennt

dateien.txt

page.tsx        der Inhalt dieser Adresse
layout.tsx      Rahmen, bleibt beim Navigieren stehen
loading.tsx     Anzeige, solange die Seite lädt
error.tsx       Auffangnetz, wenn etwas schiefgeht
not-found.tsx   wenn es die Adresse nicht gibt
route.ts        antwortet mit Daten statt mit einer Seite

Diese Namen sind fest vergeben – Next.js erkennt sie an der Datei, nicht an einer Anmeldung in irgendeiner Konfiguration. Alle anderen Dateien im selben Ordner sind ganz normale Module.

Loslegen

terminal.txt

npx create-next-app@latest meine-app
cd meine-app
npm run dev          # Entwicklung, http://localhost:3000

npm run build        # Produktionsversion bauen
npm run start        # sie lokal ausprobieren

Achtung Entwicklung und Produktion verhalten sich unterschiedlich

Im Entwicklungsmodus ist praktisch nichts zwischengespeichert, damit du deine Änderungen sofort siehst. Nach npm run build greifen alle Zwischenspeicher – und plötzlich ist eine Seite statisch, die vorher frisch aussah. Wer das nicht weiß, sucht lange. Mehr dazu in der Lektion zum Caching.

▸ Genauer erklärt: App Router und Pages Router optional

In älteren Projekten und vielen Tutorials findest du ein Verzeichnis pages/ statt app/. Das ist der Pages RouterDie ältere Art mit dem Verzeichnis `pages/`. Funktioniert weiter, bekommt aber keine neuen Fähigkeiten mehr.→ – die Vorgängergeneration.

unterschiede.txt

pages/ (alt)                    app/ (heute)
─────────────────────────      ─────────────────────────
getServerSideProps             async-Komponente mit await
getStaticProps                 fetch + revalidate
_app.tsx / _document.tsx       layout.tsx
alles läuft im Browser         Server-Komponenten als Standard
kein Streaming                 Streaming und Suspense

Beide funktionieren im selben Projekt nebeneinander, was Umstiege erleichtert. Neue Fähigkeiten bekommt aber nur noch der App Router. Für neue Projekte gibt es keinen Grund mehr, mit pages/ anzufangen.

Stolperstein Achte beim Suchen auf das Datum

Sehr viele Antworten im Netz beziehen sich noch auf getServerSideProps und getStaticProps. Wenn eine Anleitung diese Namen benutzt, beschreibt sie den alten Router – und passt nicht zu dem, was du hier lernst.

Sitzt das schon?

5 Fragen zu dieser Lektion. Falsche Antworten landen in deiner Statistik.

Der eine Unterschied, der alles verändert

Ordner sind Adressen

Die Dateien, die Next.js kennt

Loslegen

Sitzt das schon?

Ihr braucht React-Verstärkung im Team?