Der Next.js App Router ist das mit Next.js 13 stabil gewordene Routing-System, das das ältere pages/-Verzeichnis ablöst. Indem es deine Ordnerstruktur direkt auf URLs abbildet, bringt es React Server Components, verschachtelte Layouts und Streaming standardmäßig mit. In dieser Anleitung bauen wir Schritt für Schritt und mit echten Beispielen auf, wie das app/-Verzeichnis funktioniert, was die speziellen Dateien tun und wie verschachteltes Routing zusammenhängt.
Warum gibt es das app-Verzeichnis?
Im alten pages/-System war jede Datei eine Seite, und das Abrufen von Daten beruhte auf speziellen Funktionen wie getServerSideProps. Der App Router ist ordnerbasiert: Ein Ordner ist ein Routensegment, und die darin enthaltenen speziellen Dateien definieren das Verhalten dieses Segments. Der größte Unterschied: Komponenten sind standardmäßig Server Components — sie werden auf dem Server gerendert, ohne JavaScript an den Browser zu senden.
Der sauberste Weg, ein Projekt mit dem App Router zu starten, ist das offizielle Scaffolding-Tool:
npx create-next-app@latest mein-projekt
cd mein-projekt
npm run devDer Einrichtungsassistent fragt nach TypeScript, ESLint und dem App Router. Wenn du den App Router wählst, wird im Projektstamm ein app/-Ordner erstellt.
Spezielle Dateien: page, layout und der Rest
Im App Router erstellen Ordner die Route, aber ein Segment wird erst durch Dateien mit bestimmten Namen wirklich erreichbar. Die häufigsten sind:
page.tsx— rendert den eigentlichen Inhalt des Segments und macht die Route öffentlich zugänglich.layout.tsx— eine über untergeordnete Segmente geteilte Hülle, die bei der Navigation nicht neu gerendert wird.loading.tsx— erzeugt eine Suspense-Grenze; der Zwischenzustand, der während des Datenladens angezeigt wird.error.tsx— eine clientseitige Komponente, die Fehler innerhalb des Segments abfängt.not-found.tsx— die 404-Oberfläche für nicht gefundene Inhalte.
In ihrer einfachsten Form sieht eine Startseite so aus:
// app/page.tsx
export default function Home() {
return <h1>Hallo aslain.dev</h1>;
}Das Root-Layout: ein verpflichtendes Gerüst
app/layout.tsx ist in jedem App-Router-Projekt verpflichtend, weil es die <html>- und <body>-Tags definiert. Das Root-Layout ist die äußerste Hülle, die jede Seite umgibt, und es bleibt bei Seitenübergängen erhalten:
// app/layout.tsx
export const metadata = {
title: "aslain.dev",
description: "Portfolio eines vielseitigen Entwicklers",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="de">
<body>{children}</body>
</html>
);
}Die children-Prop steht für die untergeordnete Seite oder das innere Layout, das in dieses Layout eingesetzt wird. Das ist der Grundstein der verschachtelten Struktur.
Die Logik verschachtelter Routen
Verschachtelte Routen entstehen, indem man Ordner in Ordner legt. Angenommen, wir bauen einen Blog-Bereich:
app/
layout.tsx → Root-Layout
page.tsx → /
blog/
layout.tsx → umhüllt /blog und darunter
page.tsx → /blog
[slug]/
page.tsx → /blog/beliebiger-beitragHier ist [slug] ein dynamisches Segment. Die eckigen Klammern sagen, dass dieser Teil aus der URL kommt. Auf den Wert greifst du über params zu:
// app/blog/[slug]/page.tsx
export default async function Post({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
return <article>Beitrag: {slug}</article>;
}Seit Next.js 15 ist params nun ein Promise und muss mit await abgewartet werden; deshalb haben wir die Komponente als async deklariert. Der Kernpunkt: blog/layout.tsx umhüllt sowohl /blog als auch /blog/[slug], wird aber nicht neu gerendert, wenn der Nutzer von Beitrag zu Beitrag wechselt. Das ist ideal, um gemeinsame Elemente wie eine Seitenleiste oder Kopfzeile zu erhalten.
Server- und Client-Komponenten
Im App Router ist jede Komponente eine Server Component, sofern nicht anders angegeben. Wo du Interaktivität brauchst (Klicks, State, useState, useEffect), fügst du die Direktive "use client" ganz oben in die Datei ein:
// app/components/Zaehler.tsx
"use client";
import { useState } from "react";
export default function Zaehler() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}Eine gute Strategie ist es, den Großteil des Baums als Server Components zu belassen und nur die interaktiven Teile auf Blattebene in den Client zu holen. So hältst du die an den Browser gesendete JavaScript-Menge minimal.
Navigation zwischen Seiten
Um zwischen Seiten zu wechseln, verwende die next/link-Komponente statt eines einfachen <a>. Sie bietet clientseitige Navigation und Prefetching:
import Link from "next/link";
export default function Menu() {
return (
<nav>
<Link href="/">Startseite</Link>
<Link href="/blog">Blog</Link>
</nav>
);
}Wenn du programmatische Navigation brauchst, holst du dir in Client-Komponenten den useRouter-Hook aus next/navigation.
Häufige Fragen
Können App Router und Pages Router in einem Projekt koexistieren?
Ja. Next.js erlaubt sowohl app/- als auch pages/-Verzeichnisse auf Stammebene; das ist dafür gedacht, bestehende Projekte schrittweise zu migrieren. Ist dieselbe Route in beiden definiert, hat app/ Vorrang.
Was passiert, wenn ich einen Ordner ohne page.tsx hinzufüge?
Ein Ordner ohne page.tsx ist nicht per URL erreichbar; er dient nur der Organisation (zum Beispiel Routengruppen oder gemeinsam genutzte Komponenten). Eine erreichbare Route benötigt immer eine page.tsx.
Wo sollte ich Daten abrufen?
Du kannst async/await mit fetch direkt innerhalb von Server Components nutzen; spezielle Funktionen wie getServerSideProps sind nicht nötig. Next.js cacht fetch-Aufrufe automatisch und revalidiert sie bei Bedarf.
Möchtest du dein Next.js-Projekt richtig aufsetzen oder eine bestehende Anwendung zum App Router migrieren? Ich helfe dir, eine saubere, performante und SEO-freundliche Architektur aufzubauen. Kontaktiere mich und lass uns dein Projekt gemeinsam planen.