Apptiva Logo

Nextjs App Router

Was bringt der neue Router von Nextjs?

Publiziert am von Philip Schönholzer

Der App Router ist ein neues Feature in Next.js 13, das auf den React Server Components basiert. Er unterstützt gemeinsame Layouts, verschachteltes Routing, Ladezustände, Fehlerbehandlung und mehr. Der App Router läuft in einem neuen Verzeichnis namens `app`, welches neben dem `pages` Verzeichnis läuft, um eine schrittweise Einführung zu ermöglichen. Es ist wichtig zu wissen, dass der App Router Vorrang vor dem Pages Router hat.

Die drei wichtigsten Neuerungen des App Routers in Next.js 13 sind

  • Unterstützung für Shared Layouts: Mit dem App Router kann man ein gemeinsames Layout für mehrere Seiten erstellen. Dies ist besonders nützlich, wenn eine Navigationsleiste, einen Footer oder andere wiederkehrende Elemente auf mehreren Seiten benötigt werden.
  • Verschachteltes Routing: Der App Router unterstützt verschachteltes Routing. Das bedeutet, dass Sie Routen innerhalb von Routen erstellen können, was die Organisation der Anwendung vereinfacht.
  • Ladezustände und Fehlerbehandlung: Der App Router bietet eingebaute Unterstützung für Ladezustände und Fehlerbehandlung. Dadurch können benutzerfreundliche Ladebildschirme und Fehlerseiten entstehen.

React Server Komponenten

  • Flexibleres getServerSideProps: fetch mit async und await auch in importierten Komponenten verwenden.
  • Weniger JavaScript herunterladen und ausführen: Nur das JS für Komponenten mit der “use client”-Deklaration wird an den Client gesendet.
  • CSS-in-JS nicht möglich: Derzeit sind CSS-in-JS-Lösungen, die eine Laufzeit erfordern, in RSC nicht möglich.

Es ist wichtig zu beachten, dass RSCs nicht dazu gedacht sind, Client-Komponenten zu ersetzen.

Konfiguration des Cache-Verhaltens

Next.js erweitert die native Web fetch() API, um es jeder Anfrage auf dem Server zu ermöglichen, ihre eigenen persistenten Cache-Semantiken zu definieren. Durch Konfiguration kann der Cache für serverseitige fetch-Requests pro Anfrage, pro Seite oder applikationsweit definiert werden.

Fazit

Der App Router ist eine spannende Neuentwicklung mit mächtigen Möglichkeiten. Es ist aber auch so, dass der App Router teilweise grössere mentale Anpassungen bei den Entwickler:innen erfordert.

Apptiva Logo
Apptiva AG
Eichweid 1
6203 Sempach Station

041 322 26 26

info@apptiva.ch

WhatsApp LogoChat auf WhatsApp

Newsletter

Quartalsweise Apptiva-News mit hilfreichen Insights in deinem Postfach.

Socials

Swiss Made SoftwareLehrbetrieb Vignette

Deine Neugier hat dich hierher geführt. Tauche jetzt tiefer in unsere vielfältigen Inhalte ein.

Fokusthemen

Angebot

Workshops

Apptiva

Rechtliches