Générer des images avec Next.js

Les images dans votre application peuvent être un aspect important de l'intérêt que vos utilisateurs portent à votre contenu.

Cette génération d'image peut être particulièrement intéressante lorsque vous partagez du contenu sur les réseaux sociaux. Celle-ci peut participer à rendre vos contenus plus attractifs.

Comment générer des images avec Next.js ?

Satori est une bibliothèque créée par Vercel qui permet de générer des images SVG à partir de code HTML et CSS. La bibliothèque supporte également l'écriture JSX pour la génération.

Création d'un route handler

Pour commencer, vous aurez besoin de définir un nouvel API route handler dans Next.js. Sur cet endpoint de route, vous pourrez récupérer les paramètres nécessaires et retourner une nouvelle ImageResponse qui constitue l'image qui a été créée.

Prenons en exemple la création d'un blog, avec une liste d'articles. Vous souhaiteriez que chacun des articles ai une image générée pour qu'elle s'affiche lors du partage sur les réseaux sociaux.

Pour la création du route handler dans l'app router, commençons par créer un fichier route.js dans un dossier app/api/images par exemple :

import { ImageResponse } from "next/og";

export const runtime = "edge";

export async function GET(request, context) {
  const title = context.params.title;

  return new ImageResponse(
    (
      <div
        style={{
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "#fff",
          fontSize: 32,
          fontWeight: 600,
          backgroundImage:
            "radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)",
          backgroundSize: "100px 100px",
        }}>
        <svg width="75" viewBox="0 0 75 65" fill="#000" style={{ margin: "0 75px" }}>
          <path d="M37.59.25l36.95 64H.64l36.95-64z"></path>
        </svg>
        <div style={{ marginTop: 40 }}>{title}</div>
      </div>
    ),
    {
      width: 800,
      height: 400,
    }
  );
}

Ici, plusieurs éléments à prendre en compte :

• Grâce au context de ma route, je peux récupérer un paramètre d'URL pour recevoir plusieurs titres possibles. Ici, un paramètre title.
• Ma route retourne directement une nouvelle instance de ImageResponse avec le contenu JSX à l'intérieur. J'y ai ajouté un SVG (ici le logo de Vercel) et le title récupéré plus tôt.
• Dans le second paramètre, vous pouvez notamment préciser quelle sera la taille de votre image générée. Ici, une largeur de 800 pixels et hauteur de 400 pixels. Retrouvez l'ensemble des paramètres disponibles pour ImageResponse ici.

C'est tout ! Votre image est prête à être générée.

Essayez d'appeler votre route maintenant. Si on essaye sur l'URL /api/images?title=Vive%20Satori, voilà le résultat que l'on pourrait obtenir :

Vous avez maintenant une image générée, prête à être utilisée pour chacun de vos contenus de votre application Next.js.

Ajout de l'image dans les balises OpenGraph

L'usage le plus courant de la génération d'image se trouve dans l'ajout pour les balises OpenGraph. Ces métadonnées permettent de préciser aux différents réseaux sociaux comment votre contenu sera visible sur leurs plateformes.

Pour utiliser notre image générée, vous pouvez créer une nouvelle page dans le router et utiliser l'objet Metadata de Next.js pour préciser l'URL de votre image.

Voilà ce que représenterait le code de ma page d'accueil par exemple :

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Page d'accueil",
  openGraph: {
    title: `Accueil`,
    locale: "fr_FR",
    images: [
      {
        url: `/api/images?title=Accueil`,
        width: 800,
        height: 400,
      },
    ],
  },
};

const HomePage = async () => {
  // ....
};

export default HomePage;

Et voilà ! Vous êtes prêt à partager votre premier contenu Next.js avec image générée ! Essayez maintenant de partager sur les différents réseaux sociaux.

Pour aller plus loin

Voici quelques pistes pour aller plus loin dans la génération d'image pour vos contenus :

Vous pourriez récupérer uniquement l'ID ou l'URI d'un contenu depuis votre route handler et récupérer les informations de votre contenu depuis votre base de données pour afficher dans l'image générée le titre, la description.

Jetez un oeil au playground de génération d'images pour découvrir d'autres exemples d'images générées.