5 Next.js Features, die ich täglich nutze
Nach hunderten Stunden mit Next.js gibt es Features, ohne die ich nicht mehr arbeiten will. Hier sind die fünf, die meinen Workflow am meisten verändert haben.
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.
Ähnliche Artikel
Wie ich SEO gelernt habe — von 5 Besuchern täglich zu echtem Traffic
Mein Portfolio hatte 5 Besucher am Tag. Alle davon war ich selbst. Hier ist, was ich über SEO gelernt habe — und warum Google Search Console das wichtigste Tool dabei war.
Portfolio mit Next.js und SQLite: Was ich dabei gelernt habe
Ich habe mein Developer-Portfolio komplett neu gebaut — mit Next.js 15, TypeScript und SQLite statt einer externen Datenbank. Hier sind die wichtigsten Erkenntnisse.