5 Next.js Features, die ich täglich nutze

1. Server Components — weniger JavaScript, schnellere Seiten

Das war die größte Veränderung im App Router. Server Components werden auf dem Server gerendert und schicken kein JavaScript an den Browser. Das bedeutet: keine unnötigen Bundles, keine Hydration für statische Inhalte, und direkter Datenbankzugriff ohne API-Umweg.

Ein einfaches Beispiel: Eine Seite die Blogposts aus der Datenbank lädt, braucht keinen useEffect und kein fetch() mehr — der Datenbankaufruf passiert direkt im Component:

Server Components sind kein Trend — sie sind die logische Weiterentwicklung von SSR.

2. Parallel Routes und Intercepting Routes

Diese beiden Features klingen kompliziert, lösen aber ein häufiges Problem elegant: Modals die eine eigene URL haben. Stell dir vor, du klickst auf ein Foto in einem Feed — die URL ändert sich, ein Modal öffnet sich, aber beim direkten Aufruf der URL siehst du die volle Detailseite. Das geht mit Intercepting Routes nativ, ohne komplizierte State-Verwaltung.

Ich nutze das für Bild-Lightboxes und Quick-Preview-Dialoge in Admin-Oberflächen.

3. generateMetadata — SEO ohne Extra-Bibliothek

Früher brauchte man next/head und musste aufpassen, dass Titel und Description nicht doppelt gerendert werden. Mit der neuen generateMetadata-Funktion ist das Geschichte. Dynamische Metadaten pro Seite, Open Graph Tags, Twitter Cards — alles an einem Ort:

• Automatische Deduplizierung von Meta-Tags

• TypeScript-typisiert — keine Tippfehler in Property-Namen

• Async-fähig — du kannst Datenbankdaten für den Titel laden

• Cascading — Root-Layout setzt Defaults, Seiten überschreiben sie

4. Image-Optimierung out of the box

Das next/image-Component macht vieles automatisch: WebP-Konvertierung, Lazy Loading, Größenanpassung per sizes-Attribut, und verhindert Cumulative Layout Shift durch feste Dimensionen. Für ein Portfolio mit vielen Projektbildern ist das Gold wert.

Ein Tipp: Das priority-Prop für das Hero-Bild nicht vergessen — das lädt es mit höherer Priorität und verbessert den LCP-Wert deutlich.

5. Route Handlers — API ohne separaten Server

Route Handlers ersetzen die alten API Routes vollständig und sind deutlich flexibler. Sie unterstützen alle HTTP-Methoden, können auf Web-Standard-APIs wie Request und Response zugreifen, und lassen sich cachen oder dynamisch rendern.

Für mein Portfolio nutze ich sie für das Kontaktformular, den Bild-Upload, die Analytics und die Admin-API. Alles in einem Projekt, kein separater Backend-Server notwendig.

Fazit

Next.js hat sich in den letzten zwei Jahren enorm weiterentwickelt. Wer noch mit dem Pages Router arbeitet, sollte den Wechsel in Betracht ziehen — nicht wegen des Hypes, sondern wegen der echten Produktivitätsgewinne. Wenn du Fragen zum Einstieg hast, schreib mir gerne.