Next.js 16: alle Neuerungen, die du jetzt schlucken darfst

Next.js 16 ist da, und natürlich wurde niemand gefragt. Die offiziellen Docs ballern alles in den Upgrade-Guide – entweder du liest ihn oder du wirst überfahren. Spar dir das Marketing-Geschwurbel: Das hier musst du verkraften, wenn du weiter mitspielen willst.

Umgebung: Keine Ausreden mehr

Du sitzt noch auf Node 18? Falsche Entscheidung. Next.js 16 verlangt mindestens Node 20.9, TypeScript 5.1+ und moderne Browser (Chrome/Edge/Firefox 111+, Safari 16.4+). Wenn dein Fuhrpark das nicht packt, bleibst du auf 15 – inklusive der Sicherheitslöcher. Keine Deals.

Turbopack ist der neue Standard

Vergiss das Flag --turbopack. Die Engine ist standardmäßig aktiv in Dev und Build, die Config liegt jetzt ganz oben (turbopack statt experimental.turbopack). Hängst du noch an einer custom webpack-Konfiguration? Der Build bricht jetzt demonstrativ ab, damit du es endlich merkst. Klar, --webpack verzögert das Unvermeidliche, aber Turbopack ist der offizielle Weg – inklusive Dev-Disk-Cache und ohne Sass-Imports mit Tilde.

HTTP-APIs werden vollständig asynchron

Next.js 15 hatte noch eine synchrone Krücke für cookies, headers, draftMode, params und searchParams. Vorbei: alles läuft jetzt async, auch opengraph-image, twitter-image, icon und apple-icon. Noch alte Signaturen im Einsatz? Gewöhn dich an await überall. Nebenbei generiert next typegen jetzt Helper (PageProps, LayoutProps, RouteContext), damit du nicht in Types ertrinkst.

React-Teil: 19.2 und ein stabiler Compiler

Next.js 16 liefert React 19.2 (canary) samt Gefolge: View Transitions, useEffectEvent, Activity. Obendrauf wird der React Compiler zur stabilen Option (reactCompiler: true). Ja, der Build wird länger, weil Babel hintenrum weiter transpiliert, aber du bekommst automatische Memoization ohne memo-Handarbeit.

Cache Components und schlauere Navigation

Das alte Flag experimental_ppr ist Geschichte. Stattdessen führt Next.js cacheComponents ein, um die neueste Iteration von Partial Pre-Rendering zu aktivieren. SPA-Transitions prefetchen jetzt smarter: Layout-Deduplizierung, inkrementelles Prefetching … Mehr Requests, deutlich weniger Payload. Du wolltest Komfort? Bitte, ganz ohne Codeänderung.

Neue Cache-APIs: revalidateTag, updateTag, refresh

Die Cache-Schicht pumpt Eisen:

• revalidateTag(tag, cacheLife) nimmt ein Dauerprofil, damit du entspannt auffrischen kannst.
• updateTag(tag) bringt read-your-writes ohne Frickelei in Server Actions.
• refresh() refresht den Client-Router direkt nach einer Server Action.
• cacheLife und cacheTag verlieren endlich den Makel unstable_.

Entweder du nutzt das, um deine Revalidierungsstrategie aufzuräumen, oder du klebst weiter Tape und hoffst, dass der Zustand nicht implodiert.

middleware ist tot, es lebe proxy

Dateien middleware.{js,ts} heißen jetzt proxy. Der Runtime-Modus ist auf nodejs festgenagelt, edge fliegt raus (vorerst). Gleiches für die Optionen: skipMiddlewareUrlNormalize wird zu skipProxyUrlNormalize. Die Doku nimmt dich an die Hand, aber ja – du darfst stapelweise umbenennen.

Bilder: Schrauben angezogen

Die heilige Kuh next/image kassiert mehrere Änderungen:

• Query-Strings auf lokalen Bildern erfordern jetzt images.localPatterns.search.
• minimumCacheTTL springt standardmäßig auf 4 h, damit die Revalidierungs-Panik sich legt.
• Größe 16 verschwindet aus imageSizes, qualities schrumpft auf [75], lokale IPs sind geblockt ohne dangerouslyAllowLocalIP.
• Redirects sind auf 3 gedeckelt, next/legacy/image ist Geschichte.
• images.domains wird zugunsten von remotePatterns depreziert.

Wenn deine Config vor sich hin gammelt, freu dich auf Prod-Überraschungen.

DX: getrennte Outputs, ESLint zum Selbermachen, Scroll bleibt wo er ist

next dev und next build schreiben jetzt in unterschiedliche Ordner (.next/dev für Dev) und sperren sich gegenseitig, damit keine Doppel-Instanzen laufen. Das Laden von next.config wird gestrafft, deine wackeligen process.argv.includes('dev')-Hacks sind erledigt.

Beim Linting gilt: next lint ist weg. Du nutzt die pure ESLint-CLI (oder Biome, wenn du Schmerzen magst) und wechselst auf die Flat-Config, die @next/eslint-plugin-next verlangt. Und wenn du Instant-Scroll erzwungen hast, setz data-scroll-behavior="smooth" auf <html> – Next.js lässt dein CSS endlich in Ruhe.

Alpha-Extras und sonstige Reste

• Build Adapters API (Alpha): ein experimenteller Hook, damit deine Infra an der Build-Pipeline drehen kann.
• Moderne Sass-API via sass-loader v16.
• AMP, next lint, serverRuntimeConfig/publicRuntimeConfig, schräge devIndicators, experimental.dynamicIO und unstable_rootParams landen auf dem Müll.

Du wolltest ein „Full-Stack-Framework“? Next.js 16 zeigt dir, wer das Sagen hat. Also updaten – npm install next@latest react@latest react-dom@latest, die @types für die TypeScript-Fraktion, npx @next/codemod@canary upgrade latest – oder schmollen. Bis zum nächsten Release.