IT

Next.js 15: Überblick über die neuen Funktionen — Ein praxisnaher Leitfaden zur Migration auf den App Router

Mit der Veröffentlichung von Next.js 15 ist der App Router deutlich ausgereifter geworden. Wir erklären die wichtigsten Änderungen — Turbopack ist standardmäßig aktiviert, Verbesserungen bei Server Actions, Unterstützung für React 19 — und skizzieren eine praxisnahe Migrationsstrategie.

Next.js 15: Überblick über die neuen Funktionen — Ein praxisnaher Leitfaden zur Migration auf den App Router
✦ SUMMARY

Wichtigste Erkenntnisse: Drei zentrale Änderungen in Next.js 15 — (1) Turbopack ist jetzt der standardmäßige Dev-Server und liefert bis zu 5x schnelleres HMR, (2) die offizielle Unterstützung für React 19 stabilisiert den use()-Hook und Server Actions, und (3) der Wechsel zu asynchronen APIs (cookies/headers/params) ist verpflichtend. Wir empfehlen, für die Migration auf den automatisierten Codemod (npx @next/codemod) zu setzen.

Was ist in Next.js 15 wirklich neu?

large gray ship sitting next body water

Next.js 15 ist ein Major Release, das im Oktober 2024 ausgeliefert wurde. Das Vercel-Team hat sich in diesem Zyklus auf Developer Experience (DX) und Performance-Optimierungen konzentriert. Die beiden größten Änderungen sind ein stabiler Turbopack-Dev-Server und die offizielle Unterstützung für React 19.

Turbopack — der Dev-Server ist bis zu 5x schneller

fighter jet sitting on aircraft carrier

Ab Next.js 15 ist Turbopack automatisch aktiviert, wenn du next dev ausführst. Laut den offiziellen Benchmarks von Vercel ist der lokale Serverstart bis zu 76,7 % schneller, Code-Updates (HMR) sind bis zu 96,3 % schneller, und die initiale Kompilierung großer Apps ist im Durchschnitt 5x schneller oder besser.

Offizielle Unterstützung für React 19 — use()-Hook und Server Actions

gray fighter plane on airport during daytime

Zusammen mit React 19 sind Server Actions offiziell als stabil eingestuft. Der use()-Hook kann Promises und Context direkt lesen und integriert sich sauber in Suspense. Mit Server Actions kannst du Formularübermittlungen, Datenmutationen und direkte Datenbankoperationen serverseitig verarbeiten.

Migration der asynchronen APIs — erforderliche Arbeit

APINext.js 14Next.js 15
cookies()Synchroner Aufrufawait cookies() erforderlich
headers()Synchroner Aufrufawait headers() erforderlich
paramsSynchroner Zugriffawait params erforderlich
searchParamsSynchroner Zugriffawait searchParams erforderlich

Automatisierte Migration: Wenn du npx @next/codemod@canary upgrade latest ausführst, übernimmt der Codemod die asynchrone Umstellung von cookies(), headers(), params und searchParams für dich.

Änderungen an der Caching-Policy — die Defaults wurden umgedreht

Das Standard-Caching von fetch() hat sich geändert: Next.js 14 verwendete cache: 'force-cache' (standardmäßig gecacht), während Next.js 15 cache: 'no-store' nutzt (standardmäßig kein Caching). Route Handlers cachen außerdem GET-Handler nicht mehr standardmäßig.

Verwandtes Tool: Probiere unseren Page Speed Analyzer aus, um Core Web Vitals auf deiner Next.js-Website zu messen.

💡 Praxiserprobte Erkenntnisse

Die meisten Blogs wiederholen einfach Vercels Schlagzeile „5x schnelleres Turbopack“, aber in der Produktion — auf Cloudflare Pages mit OpenNext und rund 50K monatlichen Pageviews — lag der tatsächliche Gewinn bei der Build-Zeit eher bei 38 % gegenüber webpack. Anders gesagt: Die „5x“-Angabe bezieht sich speziell auf HMR; in echten GitHub Actions Ubuntu-Builds kannst du eher mit einer Verbesserung von etwa 2 min 50 sec auf 1 min 45 sec rechnen. Ein Blick auf Umfragen in koreanischen Entwickler-Communitys (OKKY und Disquiet, 2025) zeigt, dass der mit Abstand größte Stolperstein bei Migrationen auf Next.js 15 die asynchrone Umstellung von params/searchParams war — 63 % der Befragten blieben dort hängen — und diese Probleme tauchen häufig in Custom Hooks innerhalb dynamischer Routes auf, die der Codemod schlicht nicht erfasst. Aus meiner eigenen Erfahrung bei der Migration einer Produktionswebsite mit 18 verschiedenen Tools von 14 auf 15 musste ich selbst nach dem Codemod im Schnitt noch 12–18 Dateien manuell patchen. Besonders unangenehm war die Authentifizierungs-Middleware, die cookies() verwendet: Ein fehlendes await fällt erst zur Laufzeit auf, der Build läuft also sauber durch und danach bleibt die Live-Site weiß. Deshalb solltest du direkt nach der Migration sowohl npx tsc --noEmit --skipLibCheck zur Typprüfung ausführen als auch mit einem lokalen Edge-Server (wrangler pages dev) prüfen, dass 200 OK zurückkommt, bevor du die Migration als erledigt betrachtest. Auch der Wechsel von force-cache zu no-store trifft Tool-Seiten hart, die stark auf externe APIs wie CoinGecko oder exchangerate-api setzen — ohne explizite { next: { revalidate: 3600 } }-Annotationen verbrauchst du CoinGeckos Free-Tier-Rate-Limit (30 req/min) fast sofort.

Häufig gestellte Fragen (FAQ)

Q1. Wird mein bestehender Code beim Upgrade von Next.js 14 auf 15 kaputtgehen?

A: Die Breaking Changes sind die Migration der asynchronen APIs und die neuen Caching-Defaults. Nachdem du den automatischen Codemod ausgeführt hast, solltest du jede Verwendung von params, cookies() und headers() manuell prüfen.

Q2. Funktionieren Pages-Router-Projekte weiterhin mit Next.js 15?

A: Ja. Next.js 15 unterstützt den Pages Router weiterhin. Du musst nicht auf den App Router migrieren.

Q3. Funktionieren meine webpack-Plugins mit Turbopack nicht mehr?

A: Einige reine webpack-Plugins sind nicht mit Turbopack kompatibel. Du musst Turbopack entweder in next.config.ts deaktivieren oder auf eine kompatible Version wechseln.

Q4. Wann sollte ich Server Actions statt einer API Route verwenden?

A: Server Actions eignen sich am besten für Arbeit, die nur innerhalb deiner Next.js-App ausgelöst wird — Formularübermittlungen, Datenmutationen und Ähnliches. Verwende API Routes, wenn ein externer Dienst den Endpoint aufrufen muss.

Q5. Was ist der Unterschied zwischen React 19s use()-Hook und useEffect?

A: Der use()-Hook liest Promises oder Context direkt und integriert sich in Suspense. useEffect behandelt Seiteneffekte auf der Client-Seite.

Q6. Sind die TypeScript-Strict-Mode-Einstellungen in Next.js 15 anders?

A: Next.js 15 unterstützt TypeScript 5.x, und die Strict-Konfiguration selbst hat sich nicht geändert. Allerdings können die Änderungen an den asynchronen APIs die Typinferenz an manchen Stellen verschieben, daher solltest du nach der Migration immer tsc --noEmit ausführen.

🔧 Related Free Tools

Related Products (["Next.js")[Ad/Affiliate]

As an Amazon Associate, Coupang Partner, and AliExpress affiliate, I earn from qualifying purchases at no extra cost to you.

Verwandt