JavaScript-Framework Next.js 13.2 integriert Suchmaschinenoptimierung

Vercel hat das React-Framework Next.js in Version 13.2 veröffentlicht. Das Entwicklungsteam hinter dem Open-Source-Framework integriert eine neue Metadaten-API für SEO-Support, erhöht die Kompatibilität des JavaScript-Bundlers Turbopack mit seinem Vorgänger Webpack und erlaubt das Verwenden von React-Server-Komponenten im Markdown-Superset MDX.

Neue API für integrierten SEO-Support

In Version 13.2 führt das Framework integrierten Support für die Suchmaschinenoptimierung (Search Engine Optimization) ein. Wie das Entwicklungsteam ausführt, sollen vorgerenderte HTML-Inhalte nicht nur bei der Indizierung für Suchmaschinen behilflich sein, sondern auch die Performance der Anwendung erhöhen. Bislang bot Next.js bereits eine einfache API zum Modifizieren von Metadaten innerhalb einer Anwendung (next/head), doch das Team strebte ein Redesign des Optimierens für die Suche mithilfe des App Router (app) an.

Es stellt daher eine neue Metadaten-API bereit, die das Definieren von Metadaten wie etwa meta- und link-Tags innerhalb eines HTML-header-Elements erlaubt. Dabei ist eine explizite Metadatenkonfiguration in einer als Server Component vorliegenden beliebigen Seite oder einem beliebigen Layout möglich.

// app/layout.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
};

Die Metadaten-API eignet sich sowohl für statische als auch für dynamische Metadaten. Sie ist für den App Router (app) verfügbar und ersetzt die bisherige head.js-Implementierung, die somit nun als veraltet (deprecated) gilt und in Zukunft entfallen soll. Um die neue API mit TypeScript zu verwenden, ist das TypeScript-Plug-in oder das Hinzufügen des Metadata-Typs erforderlich. Weitere Informationen und Beispiele sind dem Next.js-Blog und der API-Dokumentation zu entnehmen.

Turbopack kompatibel mit Webpack-Loadern

Seit Next.js 13 ist Turbopack als Alpha-Version mit an Bord. Der JavaScript-Bundler ist als Nachfolger von Webpack vorgesehen und soll sich durch eine deutlich erhöhte Performance auszeichnen. In Next.js 13.2 lässt sich Turboback mit einigen Webpack-Loadern wie @mdx-js/loader, @svgr/webpack und babel-loader verwenden. Diese lassen sich dazu einsetzen, Dateien verschiedener Typen in JavaScript zu transformieren.

Daneben können Entwicklerinnen und Entwickler Turbopack konfigurieren, um die Modulresolution mittels Aliassen zu modifizieren, ähnlich wie bei Webpacks resolve.alias. Die Konfiguration erfolgt mit experimental.turbo.resolveAlias:

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        underscore: 'lodash',
        mocha: { browser: 'mocha/browser-entry.js' },
      },
    },
  },
};

An dem MIT-lizenzierten Open-Source-Framework Next.js arbeiten neben dem Kern-Entwicklungsteam bei Vercel auch Partner wie Google und Meta. Derzeit kann Next.js über 3,9 Millionen Downloads pro Woche bei dem Paketmanager npm sowie über 100.000 GitHub-Sterne aufweisen. Im vergangenen Jahr kamen rund 19.400 GitHub-Sterne hinzu, was Next.js in der Gesamtwertung der aktuellen Ausgabe der Studie "JavaScript Rising Stars" den vierten Platz bescherte.

Lesen Sie auch

JavaScript-Bundler Turbopack: "Mit den Erfahrungen aus zehn Jahren Webpack"

Alle Details zur neuen Version hält der Next.js-Blog bereit.

(mai)