Next.js 15: Noch schneller, noch besser

Next.js 15 bringt viele spannende Neuerungen, die sowohl die Performance als auch die Developer Experience erheblich verbessern. Von superschnellen Builds bis hin zu neuen Funktionen – hier sind die wichtigsten Updates im Überblick:

Superschnelles Turbopack

Turbopack revolutioniert den Entwicklungsprozess mit erheblich schnelleren Builds. Im Vergleich zu Webpack bietet Turbopack deutliche Geschwindigkeitsvorteile. Anhand der Performance-Messungen bei vercel.com, einer grossen Next.js-Anwendung, konnten folgende Verbesserungen festgestellt werden:

• 76.7% schneller beim Starten des lokalen Servers.
• 96.3% schneller bei Code-Updates mit Fast Refresh.
• 45.8% schneller beim Kompilieren der ersten Route ohne Caching.

Diese Verbesserungen beschleunigen insbesondere die Entwicklungszyklen und steigern die Produktivität. Du kannst Turbopack so in deinem Projekt aktivieren:

json
{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}

Verbesserte Caching-Strategien

Next.js 15 bringt wichtige Änderungen in der Caching-Logik:

• GET Route Handlers werden nicht mehr standardmässig gecached, was sicherstellt, dass stets aktuelle Daten ausgeliefert werden. Möchtest du explizit bestimmen, dass eine Route statisch generiert wird, kannst du das Caching mit dem folgenden Code steuern:

typescript
export const dynamic = 'force-static';

• Zusätzlich werden auch fetch()-Anfragen nicht mehr automatisch gecached. Entwickler müssen explizit festlegen, wann der Cache aktualisiert wird. Dies kann mit dem revalidate-Parameter geschehen:

typescript
fetch('https://example.com/api/data', { 
  next: { revalidate: 30 } // Cache wird alle 30 Sekunden aktualisiert
});

Diese Änderungen bieten mehr Kontrolle über den Cache und helfen, veraltete Daten zu vermeiden.

Neue Form-Component für einfache und sichere Formulare

Die neue Form-Component vereinfacht das Erstellen und Verwalten von Formularen und bietet zahlreiche Vorteile:

• Vorgezogenes Laden (Prefetching): Sobald das Formular in den sichtbaren Bereich des Nutzers gelangt, werden Layout und Lade-UI vorab geladen, um die Navigation schneller und reibungsloser zu gestalten.
• Nahtlose clientseitige Navigation: Geteilte Layouts und der clientseitige Zustand bleiben beim Absenden des Formulars erhalten, was für eine bessere Benutzererfahrung sorgt.
• Progressive Enhancement: Sollte JavaScript nicht geladen sein, funktioniert das Formular trotzdem über eine vollständige Seiten-Navigation.

Zusätzlich wurden die Server Actions, die auch von den Forms genutzt werden, sicherer gestaltet. Dank Secure Action IDs erstellt Next.js jetzt nicht-deterministische IDs, die bei jedem Build neu berechnet werden, was die Sicherheit erhöht.

Hier ein Beispiel für die Verwendung der neuen Form-Component:

typescript
import Form from 'next/form';

export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

Diese Komponente erleichtert das Entwickeln von Formularen, die eine serverseitige Verarbeitung benötigen, ohne komplexen clientseitigen Code, und bietet gleichzeitig erweiterte Sicherheitsfunktionen.

next/after API: Aufgaben nach der Antwort erledigen

Die next/after API, aktuell noch unstable, ermöglicht es, nicht-blockierende Aufgaben wie Logging oder Analytics nach dem Senden der Antwort an den Client auszuführen. Dies verbessert die Performance und die User Experience:

typescript
import { unstable_after as after } from 'next/server';

export default function Page() {
  after(() => {
    console.log('Logging nach dem Übermitteln der Antwort');
  });

  return <div>Page content</div>;
}

Diese API ist nützlich, um nachgelagerte Aufgaben effizient zu erledigen, ohne den Haupt-Request zu verlangsamen.

Hydration Error Verbesserungen

Next.js 15 verbessert die Handhabung von Hydration Errors erheblich. Diese Fehler treten auf, wenn der serverseitige und clientseitige Zustand einer Seite nicht übereinstimmen. Die neuen, präziseren Fehlermeldungen helfen Entwicklern, Probleme schneller zu diagnostizieren und zu beheben, was die Developer Experience verbessert.

TypeScript-Unterstützung für next.config.ts

Mit Next.js 15 kannst du die next.config.ts Datei (endlich 😉) vollständig in TypeScript schreiben. Das verbessert die Fehlererkennung und die Typenprüfung in deiner Konfigurationsdatei, was zu einer besseren Wartbarkeit führt. Hier ein Beispiel:

typescript
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // Konfigurationen 
};

export default nextConfig;

Async Request APIs

Eine breaking change in Next.js 15 betrifft die Async Request APIs. Diese APIs wurden von synchron auf asynchron umgestellt. Das bedeutet, dass bestehende Projekte angepasst werden müssen, um kompatibel zu bleiben. Hier ist ein Codebeispiel zur Verwendung der neuen asynchronen cookies() API:

typescript
import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

Diese Änderung ermöglicht eine flexiblere und effizientere Handhabung von Anfragen und Antworten in Next.js.

Tipp am Schluss: Codemod für einfache Upgrades

Next.js stellt das Codemod CLI Tool zur Verfügung, das bei der Migration von alten APIs auf die neuesten Versionen hilft. Besonders bei grösseren Änderungen, wie den neuen Async Request APIs, kann dieses Tool den Migrationsprozess erheblich erleichtern:

bash
npx @next/codemod@canary upgrade latest

Mit diesen neuen Funktionen und Verbesserungen ist Next.js 15 ein bedeutender Schritt nach vorne für die Webentwicklung.

Mehr dazu findest du in der Next.js 15 Release Note.