JavaScript framework Next.js 13.3 brings innovations for the metadata API

Software company Vercel has released Next.js 13.3. Since the last version, the React framework has gained a number of features that the development team says have been particularly requested by the community. These include an extension of the recently introduced Metadata API and the dynamic creation of Open Graph images.

Metadata API learns file conventions

Since Next.js 13.2 a new metadata API is on board. It is used to define metadata of an application for improved search engine optimization (SEO). In addition to configuration-based metadata, the API can now also handle file conventions to create content dynamically. Among other things, the API can be used with the files opengraph-image and twitter-image – each with the file extensions .jpg, .png or .svg -, robots with the file extensions .txt, .js, .jsx, .ts and .tsx as well as Use favicon.ico.

As an example usage, the development team demonstrates using file-based metadata to add a favicon to an application and an open graph image to the /about page:

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

Next.js is designed to automatically hash these files in production for caching, as well as the relevant ones head-Update items with the correct metadata information of the items such as URL, file type and image size.

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

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

The API documentation provides further information.

Open Graph connection

Dynamically creating images that follow the Open Graph protocol is not fundamentally new in Next.js. However, this previously required the installation of external libraries: Vercel OG Image Generation and Satori have offered this option via JSX, HTML and CSS for six months. In the new release, the API ImageResponse von next/server download to create corresponding images:

// /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();
  // ...
}

In addition, the Next.js App Router offers additional features such as full support for static exports. Other innovations include the Webpack successor Turbopack, which now comes with middleware and all next/font-Options can handle. The Next.js website also has a new design.

All further details about Next.js 13.3 can be found in a blog entry.

(May)