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.

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:

├── 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.

The organizers will judge on June 21 and 22, 2023 dpunkt.verlag, heise Developer and iX the enterprise JavaScript conference enterJS in Darmstadt. JavaScript and TypeScript language innovations, new and established tools and frameworks – including React, SvelteKit and Astro – as well as accessibility and software architecture will be discussed in more than 35 lectures.

All-day workshops are available both on-site and online.

Excerpt from the program:

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.


To home page

Related Posts

Hot News


usefull links

robis robis robis