Frontend Academy · Lektion

Pages Router vs. App Router

Vergleichen Sie die Routing-Modelle von Next.js: den dateibasierten Pages Router und den neuen App Router mit verschachtelten Layouts, Ladezuständen und Error Boundaries.

Lektion 1 von 413 Schritte

Pages Router vs. App Router ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Zwei Router, ein Framework

Next.js verfügt über zwei Routing-Systeme: den ursprünglichen Pages Router (Verzeichnis pages/) und den neueren App Router (Verzeichnis app/, Next 13+). Beide funktionieren weiterhin in Next 14/15.

Pages Router — Dateibasiertes Routing

Jede Datei unter pages/ wird zu einer Route. Dynamische Segmente verwenden eckige Klammern: pages/users/[id].tsx entspricht /users/123.

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Pages Router — Datenabruf

Spezielle Exporte deklarieren das Abrufverhalten: getStaticProps (SSG), getServerSideProps (SSR), getStaticPaths (SSG mit dynamischen Routen).

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — Verzeichnisbasiertes Routing

Der App Router verwendet Verzeichnisse als Routensegmente. Eine page.tsx-Datei innerhalb eines Verzeichnisses definiert die Seite.

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — Spezielle Dateien

Dateien pro Segment stellen leistungsfähige Bausteine bereit: layout.tsx (persistente UI um untergeordnete Inhalte), loading.tsx (Suspense-Fallback), error.tsx (Error Boundary), not-found.tsx.

Verschachtelte Layouts

Layouts des App Routers umschließen verschachtelte Routen und bleiben beim Navigieren bestehen – es erfolgt kein erneutes Mounting.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

Datenabruf im App Router

Server Components können asynchron sein und Daten direkt abrufen – getServerSideProps/getStaticProps sind nicht erforderlich. Die Komponente wird auf dem Server ausgeführt und sendet nur HTML an den Client.

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

Client Components im App Router

Fügen Sie am Anfang einer Datei 'use client' ein, um ihre Komponente als Client Component zu kennzeichnen (interaktiv, wird im Browser ausgeführt).

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

API-Routen vs. Route Handler

Pages Router: pages/api/users.ts exportiert eine Default-Funktion mit req/res. App Router: app/api/users/route.ts exportiert HTTP-Methoden (GET, POST) als benannte Exporte und verwendet die standardmäßigen Request-/Response-Objekte.

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

Migrationsstrategie

Beide Router können im selben Projekt koexistieren – verschieben Sie Seiten schrittweise einzeln. Bei einem Konflikt hat der App Router Vorrang.

Welchen Router wann verwenden?

Neue Projekte: App Router (leistungsfähiger und aktueller Schwerpunkt der Weiterentwicklung). Bestehende Projekte mit Pages Router: Behalten Sie ihn bei oder migrieren Sie schrittweise. Kleine statische Websites ohne Bedarf an Layouts oder RSC: Beide Varianten funktionieren.

Schnelltest

Wie kennzeichnen Sie eine Komponente im Next.js App Router als Client-Komponente?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Pages Router vs. App Router

Pages Router: dateibasiert, getStaticProps/getServerSideProps. App Router (Next 13+): ordnerbasiert, asynchrone Server-Komponenten, verschachtelte Layouts sowie Loading- und Error-Dateien. Mit 'use client' aktivieren Sie die Interaktivität auf dem Client. API-Routen: pages/api/* gegenüber app/api/*/route.ts mit Exporten für HTTP-Methoden. Beide können parallel verwendet werden; der App Router wird aktiv weiterentwickelt.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Pages Router vs. App Router“ kostenlos?

Ja — der vollständige Text von „Pages Router vs. App Router“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Pages Router vs. App Router“?

Vergleichen Sie die Routing-Modelle von Next.js: den dateibasierten Pages Router und den neuen App Router mit verschachtelten Layouts, Ladezuständen und Error Boundaries. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Pages Router vs. App Router“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Frontend Academy