Next.js 13: der App Router verändert alles

Next.js 13 ist da, und das neue app-Verzeichnis ist mehr als nur ein weiteres Feature. Es ist ein Bruch mit Gewohnheiten, die ich jahrelang gepflegt habe. Noch ist vieles Beta, und ich gehe behutsam damit um — aber die Richtung ist unverkennbar.

Ein neues mentales Modell

Jahrelang war pages/ mein Zuhause. Eine Datei, eine Route, dazu getServerSideProps oder getStaticProps als Datenschicht. Das funktionierte, aber es trennte Dinge, die eigentlich zusammengehören. Der App Router denkt anders. Routen werden zu Ordnern, und in jedem davon leben Bausteine mit klaren Aufgaben: page für den Inhalt, layout für den Rahmen, loading und error für die Zustände dazwischen.

Verschachtelte Layouts sind die stille Revolution: Was umschließt, bleibt bestehen, während sich der Inhalt darin bewegt.

Diese verschachtelten Layouts sind für mich der eigentliche Gewinn. Eine Navigation, ein Sidebar-Zustand, ein Scrollkontext — all das bleibt erhalten, während der Nutzer zwischen Unterseiten wechselt. Kein Neuaufbau, kein Flackern. Das fühlt sich endlich nach der App an, die ich immer bauen wollte.

Server Components ändern die Statik

Der größere Sprung sind die React Server Components. Komponenten rendern standardmäßig auf dem Server, holen ihre Daten direkt dort und schicken nur das Ergebnis ans Frontend. Erst wenn ich Interaktivität brauche, markiere ich eine Komponente mit "use client".

// app/projekte/page.js — läuft auf dem Server
async function Projekte() {
  const projekte = await getProjekte();
  return (
    <ul>
      {projekte.map((p) => (
        <li key={p.id}>{p.titel}</li>
      ))}
    </ul>
  );
}

Kein separater Data-Fetching-Mechanismus, kein API-Umweg für etwas, das ohnehin auf dem Server lebt. Das Datenholen wandert dorthin, wo die Daten sind. Das weniger JavaScript beim Client ankommt, ist ein angenehmer Nebeneffekt — für die animationslastigen Seiten, die ich gern baue, zählt jedes Kilobyte.

Ehrlich gesagt sortiere ich meinen Kopf gerade neu. Wann Server, wann Client? Wo verläuft die Grenze? Das braucht Übung, und manche Bibliotheken hinken noch hinterher. Ich würde heute keinen kritischen Kundenrelaunch blind darauf setzen.

Aber als Ausblick ist das überzeugend. Next.js 13 fragt nicht, wie ich Seiten anders organisiere — es fragt, wo Code eigentlich laufen sollte. Diese Frage wird uns die nächsten Jahre begleiten.