JavaScript-Framework Next.js 13.3 bringt Neuerungen für die Metadaten-API

Das Softwareunternehmen Vercel hat Next.js 13.3 veröffentlicht. Seit der letzten Version hat das React-Framework einige Features hinzugewonnen, die laut dem Entwicklungsteam von der Community besonders häufig gewünscht wurden. Dazu zählen eine Erweiterung der kürzlich eingeführten Metadaten-API und das dynamische Erstellen von Open-Graph-Bildern.

Metadaten-API lernt Dateikonventionen

Seit Next.js 13.2 ist eine neue Metadaten-API an Bord. Sie dient dazu, Metadaten einer Anwendung zur verbesserten Suchmaschinenoptimierung (SEO) zu definieren. Neben konfigurationsbasierten Metadaten kann die API nun auch mit Dateikonventionen umgehen, um Inhalte dynamisch zu erstellen. Unter anderem lässt sich die API mit den Dateien opengraph-image und twitter-image – jeweils mit den Dateiendungen .jpg, .png oder .svg –, robots mit den Dateiendungen .txt, .js, .jsx, .ts und .tsx sowie favicon.ico einsetzen.

Als ein Anwendungsbeispiel zeigt das Entwicklungsteam das Verwenden dateibasierter Metadaten zum Hinzufügen eines Favicons zu einer Anwendung und eines Open-Graph-Bildes zur /about-Seite:

app
├── favicon.ico
├── layout.js
├── page.js
└── about
    ├── opengraph-image.jpg
    └── page.js

Next.js soll diese Dateien in der Produktion automatisch mit Hashes für das Caching versehen sowie die relevanten head-Elemente mit den korrekten Metadateninformationen der Objekte wie URL, Dateityp und Bildgröße aktualisieren.

// Visiting "/"
<link rel="icon" href="<computedUrl>"/>

// Visiting "/about"
<link rel="icon" href="<computedUrl>"/>
<meta property="og:image" content="<computedUrl>" type="<computedType>" ... />

Weitergehende Informationen bietet die API-Dokumentation.

Heise-Konferenz: enterJS 2023

Am 21. und 22. Juni 2023 richten die Veranstalter dpunkt.verlag, heise Developer und iX die Enterprise-JavaScript-Konferenz enterJS in Darmstadt aus. In über 35 Vorträgen kommen JavaScript- und TypeScript-Sprachneuerungen, neue und etablierte Tools und Frameworks – darunter React, SvelteKit und Astro – sowie Barrierefreiheit und Softwarearchitektur zur Sprache.

Ganztägige Workshops stehen sowohl vor Ort als auch online bereit.

Auszug aus dem Programm:

• React 2023 – Beginn einer neuen Ära?
• Tomorrow.js? 2023.js? Was wird das nächste große Framework?
• React-Apps mit Next.js bauen (Workshop, 20. Juni, Darmstadt)
• React Beyond the Basics (Workshop, 28. Juni, online)

Open-Graph-Anbindung

Das dynamische Erstellen von Bildern, die dem Open-Graph-Protokoll folgen, ist in Next.js grundsätzlich nicht neu. Allerdings war dazu bisher das Installieren externer Libraries nötig: Vercel OG Image Generation und Satori boten seit einem halben Jahr diese Möglichkeit per JSX, HTML und CSS. Im neuen Release lässt sich nun die API ImageResponse von next/server herunterladen, um entsprechende Bilder zu erstellen:

// /app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server';

export const size = { width: 1200, height: 600 };
export const alt = 'About Acme';
export const contentType = 'image/png';

export default function og() {
  return new ImageResponse();
  // ...
}

Daneben bietet der Next.js App Router zusätzliche Features wie etwa vollständigen Support für statische Exporte. Weitere Neuerungen betreffen unter anderem den Webpack-Nachfolger Turbopack, der nun mit Middleware und allen next/font-Optionen umgehen kann. Die Next.js-Website präsentiert sich zudem in einem neuen Design.

Lesen Sie auch

React-Team drängt Entwickler zum Einsatz von Fullstack-Frameworks

---

React Goes Fullstack: Der Beginn einer neuen Ära?

Alle weiteren Details zu Next.js 13.3 finden sich in einem Blogeintrag.

(mai)