Next.js Routing: App Router und Pages Router

Routing ist eines der Kernelemente von Next.js, das sich seit der Einführung des Frameworks kontinuierlich weiterentwickelt hat. Ursprünglich baute Next.js vollständig auf dem Pages Router auf, der durch einfaches, dateibasiertes Routing das Erstellen von servergerenderten React-Anwendungen revolutionierte. Mit der Einführung von React Server Components und anderen modernen Features wie Streaming war jedoch ein neues Routing-Modell erforderlich: der App Router.

Heute empfiehlt Next.js, alle neuen Anwendungen mit dem App Router zu entwickeln. Der Pages Router bleibt jedoch weiterhin eine wichtige Komponente, da viele Bestandsprojekte auf diesem Modell basieren. Häufig ist ein vollständiges Refactoring zu aufwendig, was die Koexistenz beider Modelle in der Next.js-Welt erklärt.

In diesem Artikel werfen wir einen Blick auf beide Routing-Modelle, erklären ihre jeweiligen Vorteile und Einschränkungen und geben Empfehlungen, wann und wie der App Router eingesetzt werden sollte – besonders in Bezug auf bestehende Projekte.

Grundlagen: Was ist Routing in Next.js?

Routing beschreibt den Mechanismus, mit dem Nutzer zwischen verschiedenen Seiten einer Webanwendung navigieren können. In Next.js basiert das Routing vollständig auf der Struktur des Dateisystems. Jede Datei im pages- oder app-Verzeichnis repräsentiert automatisch eine Route, ohne dass zusätzliche Konfiguration erforderlich ist. Dabei unterscheidet sich die Implementierung jedoch leicht zwischen dem Pages Router und dem App Router.

Dateibasiertes Routing mit dem Pages Router

Der Pages Router ist das ursprüngliche Routing-Modell von Next.js. Hier erfolgt das Routing auf Basis des pages-Verzeichnisses. Jede Datei im Verzeichnis entspricht einer Route:

• pages/index.js wird zu /.
• pages/about.js wird zu /about.
• Dynamische Routen werden durch eckige Klammern definiert:
  • pages/posts/[id].js wird zu /posts/:id.

Beispiel:

pages/
├── index.js          // Route: /
├── about.js          // Route: /about
├── posts/
│   └── [id].js       // Route: /posts/:id

Mit diesem Ansatz ist das Routing einfach und klar strukturiert, eignet sich aber weniger für moderne Features wie React Server Components oder komplexe Layouts.

Dateibasiertes Routing mit dem App Router

Der App Router wurde mit Next.js 13 eingeführt und verwendet das app-Verzeichnis. Neben einfachen Seiten können hier auch Layouts, Ladezustände und Error-Boundaries direkt im Verzeichnisbaum definiert werden.

Beispiel:

app/
├── layout.js         // Basislayout für die Anwendung
├── page.js           // Route: /
├── about/
│   ├── page.js       // Route: /about
│   ├── loading.js    // Ladezustand für /about
│   └── error.js      // Fehlerseite für /about
├── posts/
│   ├── [id]/
│   │   ├── page.js   // Route: /posts/:id
│   │   ├── loading.js// Ladezustand für /posts/:id
│   │   └── error.js  // Fehlerseite für /posts/:id

Der App Router bietet zusätzliche Funktionen wie:

• Layouts: Definiere Layouts, die zwischen verschiedenen Seiten geteilt werden können.
• Loading States: Asynchrone Ladeanzeigen für eine bessere Nutzererfahrung.
• Error Boundaries: Fehlerseiten auf Seiten- oder Segmentebene.

Fazit

Sowohl der Pages Router als auch der App Router nutzen das Prinzip des dateibasierten Routings. Der App Router erweitert dieses Modell jedoch erheblich, um moderne Features zu unterstützen und die Struktur komplexer Anwendungen besser abzubilden.

Der Pages Router

Der Pages Router ist das ursprüngliche Routing-Modell von Next.js und war lange Zeit die einzige Möglichkeit, Seiten in einer Next.js-Anwendung zu definieren. Er basiert vollständig auf dem pages-Verzeichnis und bietet eine einfache und intuitive Möglichkeit, servergerenderte React-Anwendungen zu erstellen.

Funktionsweise des Pages Routers

• Dateibasierte Struktur: Jede Datei im pages-Verzeichnis entspricht einer Route, z. B. pages/about.js für die Route /about.
• Server-Side Rendering (SSR): Standardmäßig unterstützt der Pages Router serverseitiges Rendering durch Funktionen wie getServerSideProps oder getInitialProps.
• Static Site Generation (SSG): Entwickler können mit getStaticProps und getStaticPaths statische Seiten erstellen.
• API-Routen: Dateien im pages/api-Verzeichnis definieren serverseitige Endpunkte.

Beispiel:

pages/
├── index.js          // Route: /
├── about.js          // Route: /about
├── posts/
│   ├── [id].js       // Route: /posts/:id
├── api/
│   ├── hello.js      // API-Route: /api/hello

Vorteile des Pages Routers

1. Einfache Struktur: Das Konzept ist leicht verständlich, besonders für Entwickler:innen, die neu in Next.js sind.
2. Flexibilität: Der Pages Router unterstützt serverseitiges und statisches Rendering ohne zusätzlichen Aufwand.
3. Abwärtskompatibilität: Viele bestehende Next.js-Anwendungen basieren auf dem Pages Router und profitieren weiterhin von Updates.

Einschränkungen des Pages Routers

1. Keine Unterstützung für React Server Components: Der Pages Router ist nicht für die neuesten Features von React, wie React Server Components oder Streaming, ausgelegt.
2. Manuelles Layout-Management: Layouts müssen pro Seite wiederholt definiert oder mit Workarounds wie _app.js zentralisiert werden.
3. Fehlende Segmentierung: Es gibt keine native Unterstützung für segmentbasiertes Laden oder Error-Boundaries auf Komponentenebene.

Wann eignet sich der Pages Router?

Der Pages Router ist ideal für:

• Bestehende Projekte, die auf einem stabilen und bewährten Modell basieren.
• Anwendungen mit geringer Komplexität, bei denen die neuesten React-Features nicht notwendig sind.
• Projekte, bei denen ein vollständiges Refactoring zu aufwendig oder nicht wirtschaftlich ist.

Der App Router

Mit der Einführung von Next.js 13 wurde der App Router eingeführt, der ein moderneres und flexibleres Modell für das Routing bietet. Er ist speziell darauf ausgelegt, die neuesten React-Features wie React Server Components, Streaming und Segmentbasiertes Rendering zu unterstützen. Der App Router basiert auf dem app-Verzeichnis und bietet eine neue Art, komplexe und performante Anwendungen zu strukturieren.

Funktionsweise des App Routers

• Dateibasierte Struktur: Ähnlich wie beim Pages Router repräsentiert jede Datei eine Route, jedoch mit zusätzlichen Features wie Layouts und Error-Boundaries.
• Server Components: Der App Router nutzt React Server Components, um Inhalte serverseitig zu rendern und JavaScript für den Client zu reduzieren.
• Layouts und Segmentierung: Layouts können auf verschiedenen Ebenen definiert werden und bieten eine bessere Wiederverwendbarkeit und Struktur.
• Asynchrones Streaming: Inhalte können in Echtzeit gestreamt werden, wodurch die Benutzererfahrung verbessert wird.

Beispiel:

app/
├── layout.js         // Globales Layout
├── page.js           // Route: /
├── about/
│   ├── layout.js     // Layout für /about
│   ├── page.js       // Route: /about
│   ├── loading.js    // Ladezustand für /about
│   └── error.js      // Fehlerseite für /about
├── posts/
│   ├── [id]/
│   │   ├── page.js   // Route: /posts/:id
│   │   ├── loading.js// Ladezustand für /posts/:id
│   │   └── error.js  // Fehlerseite für /posts/:id

Vorteile des App Routers

1. React Server Components: Inhalte können serverseitig gerendert und nahtlos an den Client gestreamt werden, was die Performance erheblich verbessert.
2. Layouts: Layouts können hierarchisch definiert und für mehrere Seiten wiederverwendet werden, wodurch sich die Strukturierung von Anwendungen deutlich vereinfacht.
3. Asynchrones Streaming: Inhalte werden in Echtzeit gestreamt, wodurch die Benutzeroberfläche schneller reagiert.
4. Error-Boundaries und Loading States: Fehlerseiten und Ladeanzeigen können spezifisch für einzelne Routen definiert werden, ohne globale Workarounds.

Einschränkungen des App Routers

1. Neue Konzepte: Entwickler:innen müssen sich mit neuen Konzepten wie Server Components und segmentbasiertem Routing vertraut machen.
2. Kompatibilität: Ältere Features wie getServerSideProps und getStaticProps werden nicht unterstützt. Stattdessen werden Daten direkt in Server Components oder Server Actions verarbeitet.

Wann eignet sich der App Router?

Der App Router ist ideal für:

• Neue Projekte, die von den neuesten React- und Next.js-Features profitieren sollen.
• Anwendungen, die eine hohe Performance und modulare Struktur benötigen.
• Projekte mit komplexen Anforderungen an Layouts, asynchrones Rendering oder segmentiertes Laden.

Vergleich: Pages Router vs. App Router

Die beiden Routing-Modelle von Next.js – Pages Router und App Router – basieren auf dem Prinzip des dateibasierten Routings, unterscheiden sich jedoch grundlegend in ihren Funktionen und Anwendungsbereichen. Im Folgenden werden die wichtigsten Unterschiede und Stärken beider Routermodelle gegenübergestellt.

Wann eignet sich welcher Router?

Pages Router

Der Pages Router ist die bessere Wahl für bestehende Projekte, die bereits auf diesem Modell basieren. Er ist bewährt, stabil und bietet alle grundlegenden Features für serverseitiges Rendering und statische Seiten. Ein Wechsel zum App Router ist oft mit erheblichem Refactoring verbunden und sollte gut abgewogen werden.

App Router

Der App Router ist die empfohlene Wahl für neue Anwendungen. Mit Unterstützung für React Server Components, Streaming und segmentiertes Rendering ist er zukunftssicher und ermöglicht die Entwicklung moderner, performanter Webanwendungen.

Refactoring von Pages Router zu App Router

Für bestehende Projekte, die den Pages Router verwenden, stellt sich oft die Frage, ob und wann ein Wechsel zum App Router sinnvoll ist. Der App Router bietet zwar viele Vorteile, ein vollständiges Refactoring kann jedoch zeitaufwendig und komplex sein. In diesem Abschnitt betrachten wir die Gründe für ein Refactoring, typische Herausforderungen und mögliche Strategien.

Gründe für ein Refactoring

1. Nutzung moderner Features: React Server Components, segmentbasiertes Rendering und asynchrones Streaming sind im Pages Router nicht verfügbar und erfordern den Wechsel zum App Router.
2. Performance-Verbesserungen: Durch die Reduzierung von JavaScript und serverseitige Datenverarbeitung können Anwendungen mit dem App Router schneller werden.
3. Skalierbarkeit: Der App Router bietet eine modularere Struktur, die die Wartbarkeit und Erweiterbarkeit großer Projekte erleichtert.
4. Langfristige Unterstützung: Der App Router ist die bevorzugte Lösung für neue Features in Next.js, während der Pages Router vor allem für Legacy-Projekte weiter gepflegt wird.

Herausforderungen beim Refactoring

1. Aufwändiger Umbau der Verzeichnisstruktur: Die Migration von pages/ zu app/ erfordert eine vollständige Neuorganisation der Anwendung.
2. Neues Datenfetching-Modell: Statt getServerSideProps oder getStaticProps muss das Datenhandling in Server Components oder Server Actions verlagert werden.
3. Anpassung der Layout-Logik: Layouts, die bisher global in _app.js definiert wurden, müssen in hierarchische Layouts umstrukturiert werden.
4. Fehleranfälligkeit: Bei komplexen Anwendungen können unerwartete Probleme auftreten, insbesondere bei Drittanbieter-Bibliotheken oder APIs, die auf den Pages Router zugeschnitten sind.

Strategien für ein schrittweises Refactoring

Ein schrittweises Refactoring kann helfen, Risiken und Aufwand zu minimieren. Hier sind einige Tipps:

1. Teilmigration von Routen:

   • Beginne mit einem Hybrid-Ansatz, bei dem bestimmte Routen weiterhin im pages/-Verzeichnis verbleiben, während neue Routen im app/-Verzeichnis erstellt werden.
   • Dies ermöglicht eine graduelle Migration und minimiert Unterbrechungen.

2. Datenfetching anpassen:

   • Migriere zunächst einfache Datenfetching-Logiken zu Server Components, um dich mit dem neuen Modell vertraut zu machen.
   • Nutze die Vorteile von Server Actions für komplexere Datenmanipulationen.

3. Layouts schrittweise einführen:

   • Erstelle ein globales Layout für die Anwendung im app/layout.js.
   • Migriere Seiten nach und nach in untergeordnete Layouts, um die Struktur schrittweise zu verbessern.

4. Testing und Monitoring:

   • Führe umfassende Tests durch, um sicherzustellen, dass die Funktionalität der migrierten Seiten erhalten bleibt.
   • Nutze Tools wie Lighthouse oder Web Vitals, um Performance-Verbesserungen zu messen.

Wann ist ein Refactoring sinnvoll?

• Sinnvoll: Wenn du von den neuen Features des App Routers profitieren möchtest und die Anwendung langfristig weiterentwickelt wird.
• Nicht sinnvoll: Wenn das Projekt stabil ist, keine neuen Anforderungen bestehen oder der Aufwand für ein Refactoring die Vorteile überwiegt.

Fazit

Next.js bietet mit dem Pages Router und dem App Router zwei leistungsstarke Modelle für das Routing. Während der Pages Router als bewährtes und stabiles Modell weiterhin eine wichtige Rolle spielt, repräsentiert der App Router die Zukunft des Frameworks und setzt auf moderne Technologien wie React Server Components, asynchrones Streaming und segmentiertes Rendering.

Für neue Projekte ist der App Router die klare Empfehlung. Er ermöglicht eine modularere Struktur, verbesserte Performance und eine nahtlose Integration moderner Features. Bestehende Projekte können weiterhin vom Pages Router profitieren, insbesondere wenn ein vollständiges Refactoring zu aufwendig oder nicht wirtschaftlich ist. Ein Hybrid-Ansatz kann hier eine sinnvolle Zwischenlösung sein.

Die Wahl des richtigen Routers hängt letztlich von den Anforderungen deines Projekts ab. Während der Pages Router eine solide Grundlage für viele bestehende Anwendungen bietet, eröffnet der App Router neue Möglichkeiten für die Entwicklung performanter und skalierbarer Webanwendungen.