BackZurück zum Blog

Next.js 12.2

Next.js 12.2 führt stabile Middleware und On-Demand ISR ein, sowie experimentelles Edge SSR, API Routes und mehr!

Wir legen mit Version 12.2 das Fundament für die Zukunft von Next.js:

Aktualisieren Sie heute durch Ausführen von npm i next@latest.

Middleware (Stabil)

Wir freuen uns, bekannt zu geben, dass Middleware in Version 12.2 stabil ist und eine verbesserte API basierend auf Nutzerfeedback bietet.

Middleware ermöglicht es Ihnen, Code auszuführen, bevor eine Anfrage abgeschlossen ist. Basierend auf der eingehenden Anfrage können Sie die Antwort durch Rewriting, Redirects, Hinzufügen von Headern oder Setzen von Cookies modifizieren.

middleware.ts
import { NextRequest, NextResponse } from 'next/server';
 
// Wenn die eingehende Anfrage das "beta"-Cookie enthält,
// wird die Anfrage zu /beta umgeschrieben
export function middleware(req: NextRequest) {
  const isInBeta = JSON.parse(req.cookies.get('beta') || 'false');
  req.nextUrl.pathname = isInBeta ? '/beta' : '/';
  return NextResponse.rewrite(req.nextUrl);
}
 
// Unterstützt sowohl einzelne Werte als auch Arrays von Matches
export const config = {
  matcher: '/',
};

Um auf die neuesten API-Änderungen für Middleware zu aktualisieren, lesen Sie bitte den Migrationsleitfaden.

Testen Sie Middleware kostenlos auf Vercel oder beim Self-Hosting mit next start.

On-Demand Incremental Static Regeneration (Stabil)

On-Demand Incremental Static Regeneration (ISR) ermöglicht es Ihnen, Inhalte Ihrer Website zu aktualisieren, ohne neu deployen zu müssen. Dies vereinfacht die sofortige Aktualisierung Ihrer Website, wenn sich Daten in Ihrem Headless CMS oder Commerce-System ändern. Dies war eine der am häufigsten gewünschten Funktionen der Community und wir freuen uns, dass sie nun stabil ist.

pages/api/revalidate.js
export default async function handler(req, res) {
  // Überprüfen des Secrets zur Validierung der Anfrage
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Ungültiger Token' });
  }
 
  try {
    await res.revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // Bei einem Fehler zeigt Next.js weiterhin
    // die letzte erfolgreich generierte Seite an
    return res.status(500).send('Fehler beim Revalidieren');
  }
}

Incremental Static Regeneration funktioniert mit allen Anbietern, die die Next.js Build API (next build) unterstützen. Bei Deployment auf Vercel erfolgt die On-Demand-Revalidierung global in ~300ms beim Pushen von Seiten an die Edge.

Weitere Informationen finden Sie in der Dokumentation oder sehen Sie sich unsere Demo an, um On-Demand-Revalidierung in Aktion zu erleben.

Edge API Routes (Experimentell)

Next.js unterstützt nun auch die Verwendung der Edge Runtime für API Routes. Die Edge Runtime ist eine schlankere Laufzeitumgebung als Node.js und ermöglicht schnelle Starts für niedrige Latenz. Zusätzlich unterstützen Edge API Routes Streaming-Antworten vom Server.

Sie können die Runtime für eine API Route in der config festlegen, indem Sie entweder nodejs (Standard) oder experimental-edge angeben:

pages/api/hello.js
import type { NextRequest } from 'next/server';
 
export default (req: NextRequest) => {
  return new Response(`Hallo von ${req.url} - ich bin jetzt eine Edge API Route!`);
};
 
export const config = {
  runtime: 'experimental-edge',
};

Aufgrund der schlanken Natur der Edge Runtime gibt es Einschränkungen für schnelle Starts - beispielsweise werden Node.js-spezifische APIs wie fs nicht unterstützt. Daher bleibt die Standard-Runtime für API Routes nodejs.

Weitere Informationen finden Sie in der Dokumentation.

Edge Server-Rendering (Experimentell)

Next.js unterstützt nun die Verwendung der Edge Runtime für Server-Rendering.

Wie bereits erwähnt, ist die Edge Runtime eine schlankere Laufzeitumgebung als Node.js und ermöglicht schnelle Starts für niedrige Latenz. In Kombination mit React 18 ermöglicht sie Streaming-Server-Rendering für Seiten.

Next.js verwendet Node.js als Standard-Runtime für server-seitig gerenderte Seiten. Ab Version 12.2 können Sie bei Verwendung von React 18 die Edge Runtime aktivieren.

Sie können die Runtime global in next.config.js festlegen, indem Sie entweder nodejs oder experimental-edge angeben:

next.config.js
module.exports = {
  experimental: {
    runtime: 'experimental-edge',
  },
};

Die Änderung der Standard-Runtime betrifft alle Seiten, einschließlich SSR Streaming und Server Components Funktionen. Sie können diese Standardeinstellung auch seitenweise überschreiben, indem Sie eine runtime-Config exportieren:

pages/index.js
export const config = {
  runtime: 'nodejs',
};
 
export default function Home() {}

Sie können erkennen, welche Runtime Sie verwenden, indem Sie während der Laufzeit die Umgebungsvariable process.env.NEXT_RUNTIME überprüfen oder während der Webpack-Kompilierung die Variable options.nextRuntime untersuchen.

Weitere Informationen finden Sie in der Dokumentation.

Verbesserungen für next/image

next/future/image Komponente (Experimentell)

Basierend auf Ihrem Feedback zur aktuellen Image-Komponente freuen wir uns, eine frühe Vorschau der neuen next/image-Komponente teilen zu können. Diese neue und verbesserte Image-Komponente benötigt weniger Client-seitiges JavaScript und vereinfacht das Styling von Bildern:

  • Rendert ein einzelnes <img> ohne <div>- oder <span>-Wrapper
  • Unterstützung für den kanonischen style-Prop hinzugefügt
  • Entfernte layout-, objectFit- und objectPosition-Props zugunsten von style oder className
  • Entfernte IntersectionObserver-Implementierung zugunsten von nativem Lazy Loading
  • Entfernte loader-Config zugunsten des loader-Props
  • Hinweis: Noch kein fill-Modus, daher sind width & height-Props erforderlich

Dies verbessert die Performance, da natives loading="lazy" nicht auf React-Hydration und Client-seitiges JavaScript warten muss.

Weitere Informationen finden Sie in der Dokumentation.

Remote Patterns (Experimentell)

next/image unterstützt nun eine experimentelle Konfigurationsoption remotePatterns, mit der Sie Wildcards für Remote-Bilder bei Verwendung der integrierten Image Optimization API angeben können. Dies ermöglicht leistungsfähigeres Matching jenseits der bestehenden images.domains-Konfiguration, die nur exakte Domain-Übereinstimmungen durchführt.

next.config.js
module.exports = {
  experimental: {
    images: {
      remotePatterns: [
        {
          // Der `src`-Property-Hostname muss mit `.example.com` enden,
          // andernfalls wird mit 400 Bad Request geantwortet.
          protocol: 'https',
          hostname: '**.example.com',
        },
      ],
    },
  },
};

Weitere Informationen finden Sie in der Dokumentation.

Bildoptimierung deaktivieren

Die Zero-Config-Bildoptimierungs-API verhindert die Verwendung von next export, da sie einen Server benötigt, um Bilder bei Bedarf zu optimieren. Bisher mussten Nutzer, die next export verwenden, den loader konfigurieren, um einen Drittanbieter für die Bildoptimierung zu nutzen. Falls kein Anbieter verfügbar war, gab es keine klare Lösung. Ab heute können Nutzer von next export die Bildoptimierung für alle Instanzen von next/image mit einer neuen Konfigurationseigenschaft deaktivieren:

next.config.js
module.exports = {
  experimental: {
    images: {
      unoptimized: true,
    },
  },
};

SWC-Plugins (Experimentell)

Der Next.js Compiler verwendet SWC, um Ihren JavaScript-Code für die Produktion zu transformieren und zu minimieren. SWC wurde in Next.js 12.0 eingeführt, um die Leistung in der lokalen Entwicklung und beim Build zu verbessern.

Sie können jetzt Plugins (geschrieben in WebAssembly) hinzufügen, um das Transformationsverhalten von SWC während der Kompilierung anzupassen:

next.config.js
module.exports = {
  experimental: {
    swcPlugins: [
      ['css-variable/swc', { displayName: true, basePath: __dirname }],
    ],
  },
};

Weitere Informationen finden Sie in der Dokumentation.

Verbesserte React 18-Unterstützung

  • Verbesserte Unterstützung für CSS-in-JS-Bibliotheken wie styled-components und emotion mit einem reibungsloseren Upgrade-Erlebnis und ohne Breaking Changes.
  • AMP und HTML-Post-Optimierung (CSS, Schriftoptimierungen) werden nun ordnungsgemäß unterstützt.
  • next/head unterstützt jetzt React 18.
  • Der Next.js-Routenansager, der für die korrekte Ankündigung von Seitenübergängen für Screen Reader und andere assistive Technologien verwendet wird, unterstützt nun React 18.

Weitere Verbesserungen

  • Unterstützung für die Emotion-Transformation im Next.js Compiler. Die meisten Funktionen von @emotion/babel-plugin werden jetzt unterstützt, und es kann entfernt werden, sofern Sie nicht importMap verwenden. Weitere Informationen finden Sie in der Dokumentation.
  • Bessere Unterstützung für die styled-components-Transformation im Next.js Compiler durch die Möglichkeit, die Standardoptionen anzupassen, einschließlich der cssProp-Option. Weitere Informationen finden Sie in der Dokumentation.
  • Bessere Unterstützung für JavaScript ES Modules, sodass Komponenten wie next/image und next/link korrekt importiert werden können.
  • next/link erfordert nicht mehr manuell ein <a> als Child-Element. Sie können dieses Verhalten jetzt optional aktivieren in einer abwärtskompatiblen Weise.
  • Wir haben experimentelle Unterstützung für das Ausliefern von nur modernem JavaScript durch die Anpassung von browsersList hinzugefügt. Sie können dieses Verhalten aktivieren, indem Sie browsersListForSwc: true und legacyBrowsers: false in der experimental-Option von next.config.js setzen.
  • Neue Optimierungen von @swc/helpers verhindern Duplikate in Bundles, was die Bundle-Größe in einer minimalen Konfiguration um etwa 2KB reduziert und bei größeren Apps noch mehr.
  • Wir haben die Installationsgröße von Next.js erheblich reduziert. Dies wurde erreicht, indem wir unser Monorepo auf pnpm umgestellt haben, was es uns ermöglicht, doppelte Pakete zu entfernen, während wir die vorab kompilierten Versionen erstellen, die wir verwenden. Dies führt zu einer Reduzierung der Installationsgröße um 14MB.
  • In unseren fortlaufenden Bemühungen, das Self-Hosting von Next.js zu verbessern, stabilisieren wir unsere experimentelle outputStandalone: true-Konfiguration zu output: 'standalone'. Diese Konfiguration reduziert die Bereitstellungsgrößen drastisch, indem nur notwendige Dateien/Assets eingeschlossen werden, einschließlich der Entfernung der Notwendigkeit, alle node_modules im bereitgestellten Paket zu installieren. Diese Konfiguration kann in unserem with-docker-Beispiel in Aktion gesehen werden.

Layouts RFC & Erweiterte Routing-Unterstützung

Falls Sie es verpasst haben, haben wir letzten Monat die Layouts RFC angekündigt – das größte Update für Next.js seit seiner Einführung im Jahr 2016, einschließlich:

  • Verschachtelte Layouts: Erstellen Sie komplexe Anwendungen mit verschachtelten Routen.
  • Für Server Components optimiert: Optimiert für die Navigation in Teilbäumen.
  • Verbessertes Data Fetching: Datenabruf in Layouts ohne Waterfalls.
  • Verwendung von React 18-Features: Streaming, Transitions und Suspense.
  • Client- und Server-Routing: Server-zentriertes Routing mit SPA-ähnlichem Verhalten.
  • 100% schrittweise übernehmbar: Keine Breaking Changes, sodass Sie schrittweise migrieren können.
  • Fortgeschrittene Routing-Konventionen: Offscreen-Stashing, sofortige Übergänge und mehr.

Weitere Informationen finden Sie in der RFC oder geben Sie Feedback.

Danke an die Mitwirkenden

Next.js ist das Ergebnis der gemeinsamen Arbeit von über 2.000 einzelnen Entwicklern, Industriepartnern wie Google Chrome und Meta und unserem Kernteam bei Vercel.

Diese Version wurde durch die Beiträge von ermöglicht: @huozhi, @ijjk, @kwonoj, @ViolanteCodes, @akrabdev, @timneutkens, @jpveilleux, @stigkj, @jgoping, @oof2win2, @Brooooooklyn, @CGamesPlay, @lfades, @molebox, @steven-tey, @SukkaW, @Kikobeats, @balazsorban44, @erikbrinkman, @therealmarzouq, @remcohaszing, @perkinsjr, @shuding, @hanneslund, @housseindjirdeh, @RobertKeyser, @styfle, @htunnicliff, @lukeshumard, @sagnik3, @pixelass, @JoshuaKGoldberg, @rishabhpoddar, @nguyenyou, @kdy1, @sidwebworks, @gnoff, @gaspar09, @feugy, @mfix-stripe, @javivelasco, @Chastrlove, @goncharov-vlad, @NaveenDA, @Firfi, @idkwhojamesis, @FLCN-16, @icyJoseph, @ElijahPepe, @elskwid, @irvile, @Munawwar, @ykolbin, @hulufei, @baruchadi, @imadatyatalah, @await-ovo, @menosprezzi, @gazs, @Exortions, @rubens-lopes, @woochul2, @stefee, @stmtk1, @jlarmstrongiv, @MaedahBatool, @jameshfisher, @fabienheureux, @TxHawks, @mattbrandlysonos, @iggyzap, @src200, @AkifumiSato, @hermanskurichin, @kamilogorek, @ben-xD, @dawsonbooth, @Josehower, @crutchcorn, @ericmatthys, @CharlesStover, @charlypoly, @apmatthews, @naingaungphyo, @alexandrutasica, @stefanprobst, @dc7290, @DilwoarH, @tommarshall, @stanhong, @leerob, @appsbytom, @sshyam-gupta, @saulloalmeida, @indicozy, @ArianHamdi, @Clariity, @sebastianbenz, @7iomka, @gr-qft, @Schniz, @dgagn, @sokra, @okbel, @tbvjaos510, @dmvjs, @PepijnSenders, @JohnPhamous, @kyliau, @eric-burel, @alabhyajindal, @jsjoeio, @vorcigernix, @clearlyTHUYDOAN, @splatterxl, @manovotny, @maxproske, @nvh95, @frankievalentine, @nuta, @bagpyp, @dfelsie, @qqpann, @atcastle, @jsimonrichard, @mass2527, @ekamkohli, @Yuddomack, @tonyspiro, @saurabhmehta1601, @banner4422, @falsepopsky, @jantimon, @henriqueholtz, @ilfa, @matteobruni, @ryscheng, @hoonoh, @ForsakenHarmony, @william-keller, @AleksaC, @Miikis, @zakiego, @radunemerenco, @AliYusuf95 und @dominiksipowicz.